考虑这个非常简单的标题:
.box {
height: 100%;
width: 50px;
background-color: blue;
}
.row {
display: flex;
height: 60px;
background-color: yellow;
}<div class="row">
<div class="box"></div>
<h1>This string needs to be able to wrap</h1>
</div>蓝色框需要由行高度定义，并且文本需要能够换行。但是正如你所看到的，当文本自动换行时，它会扩展到flexbox之外。flexbox根本不能生长，因为我已经定义了它的高度。如果我删除高度规格，那么文本自动换行正常工作，但蓝色框消失了。这是一个非常令人沮丧的问题，我花了几个小时试图弄清楚。有没有办法对行说"你的高度是60px，但如果你需要的话，你可以把它调大一些"?
我已经试过了:
- 使用
min-height: 60px。由于某些原因，当我这样做时，蓝色框仍然没有显示。 - 使用
max-height: 100px。行默认为该大小，当文本不换行时，该大小太大了。
我想我可以写媒体查询手动改变行的高度，但似乎应该有一个更灵活的方式来做到这一点。什么好主意吗?
如果你想玩它，这里是JS提琴。
你不需要height: 100%;flex元素的子元素。
如果你想在父元素的最小高度为60px，使用min-height: 60px;而不是height: 60px;
.box {
width: 50px;
background-color: blue;
}
.row {
display: flex;
background-color: yellow;
min-height: 60px;
}