CSS 如何拉伸孩子以填充横轴？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29467660/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to stretch children to fill cross-axis?
提问by Deborah Cole
I have a left-right 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>The problem is that the right child is not behaving responsively. To be specific, I want it to fill the height of the wrapper.
问题是正确的孩子没有反应。具体来说，我希望它填充包装纸的高度。
How to accomplish this?
如何做到这一点？
回答by Alex Shesterov
The children of a row-flexbox container automatically fill the container's vertical space.
Specify
flex: 1;for a child if you want it to fill the remaining horizontal space:
row-flexbox 容器的子项会自动填充容器的垂直空间。
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>- Specify
flex: 1;for both children if you want them to fill equal amounts of the horizontal space:
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>