我有一个左右的flexBox：
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 70vh;
min-height: 325px;
max-height:570px;
}
<div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div>
问题是,正确的孩子没有表现出反应.具体来说,我希望它填充包装器的高度.怎么做到这一点？
谢谢,
黛比
解决方法
>行 – flexBox容器的子项自动填充容器的垂直空间.
>指定flex：1;对于孩子,如果你想让它填补剩余的水平空间：
>指定flex：1;对于孩子,如果你想让它填补剩余的水平空间：
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
flex: 1;
}
<div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div>
>指定flex：1;对于两个孩子,如果你想让他们填充相等数量的水平空间：
.wrapper {
display: flex;
flex-direction: row;
align-items: stretch;
width: 100%;
height: 5em;
background: #ccc;
}
.wrapper > div
{
flex: 1;
}
.wrapper > .left
{
background: #fcc;
}
.wrapper > .right
{
background: #ccf;
}
<div class="wrapper"> <div class="left">Left</div> <div class="right">Right</div> </div>
