Html 如何拉伸 flex child 以填充容器的高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46954952/
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 flex child to fill height of the container?
提问by Konstantin Vahrushev
I need to stretch yellow child to fill all height of parent. Without setting parent height. Height of parent should be dependent on blue child text. https://jsfiddle.net/7vaequ1c/1/
我需要拉伸黄色孩子来填充父母的所有高度。不设置父级高度。父级的高度应取决于蓝色子级文本。 https://jsfiddle.net/7vaequ1c/1/
<div style='display: flex'>
<div style='background-color: yellow;height: 100%; width: 20px'>
</div>
<div style='background-color: blue'>
some<br>
cool<br>
text
</div>
</div>回答by Ason
When using Flexbox, the major mistake is to start using height: 100%all over.
使用 Flexbox 时，主要的错误是从头开始使用height: 100%。
We are used to that in many cases, though when it comes to Flexbox, it often breaks it instead.
在很多情况下，我们已经习惯了这一点，但当涉及到 Flexbox 时，它往往会破坏它。
The solution is simple, just remove the height: 100%, and it will work automatically.
解决方法很简单，只要去掉height: 100%，它就会自动工作。
The reason it does, is for flex itemin rowdirection (the default), the align-itemscontrol the vertical behavior, and as its default is stretchthis just work as is.
它的原因，是柔性的项目在行方向（默认），align-items控制垂直行为，并作为其默认的是stretch这只是工作原样。
Stack snippet
堆栈片段
<div style='display: flex'>
<div style='background-color: yellow; width: 20px'>
</div>
<div style='background-color: blue'>
some<br>
cool<br>
text
</div>
</div>回答by Daniel Sixl
If I understood correctly, you are looking for the align-itemsproperty, which defines the layout along the cross axis, in this case vertically.
如果我理解正确，您正在寻找align-items属性，它定义了沿交叉轴的布局，在这种情况下是垂直的。
You can find a good overview here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
你可以在这里找到一个很好的概述：https: //css-tricks.com/snippets/css/a-guide-to-flexbox/
.flexbox {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch; // <-- stretch vertical (default value, can be omitted here)
align-content: center;
}
.box {
padding: 1em;
text-align: center;
margin: 1em;
}
.box--yellow {
background-color: yellow;
}
.box--blue {
background-color: blue;
color: white;
}<div class="flexbox">
<div class="box box--yellow">
yellow
</div>
<div class="box box--blue">
some<br>
cool<br>
text
</div>
</div>回答by Mas Ghahremani
Remove
消除
height:100%;
高度：100%；
and instead do something like this example :
而是做类似这个例子的事情：
<div style="display:flex; flex-direction:column">
<div style="flex-grow:1;"> Item 1 </div>
<div style="flex-grow:1;"> Item 2 </div>
</div>
above example will show you what you want.
上面的例子会告诉你你想要什么。
回答by hkg328
<div style='display: flex'>
<div style='background-color: yellow; width: 20px'>
</div>
<div style='background-color: blue'>
some<br>
cool<br>
text
</div>
</div>回答by davemaloney
Here you go:
干得好：
<div style='display: flex;'>
<div style='background-color: yellow; flex: none auto; width: 20px'></div>
<div style='background-color: blue'>
some<br>
cool<br>
text
</div>
</div>