如何设置flex行默认高度，同时允许内容超出时自动垂直扩展？

直接利用flex布局的默认拉伸特性即可实现需求，只需修改两处CSS配置：

1. 将.row的height: 60px改为min-height: 60px，保证默认高度为60px，内容超出时可自动撑开
2. 删掉.box的height: 100%属性，依赖flex容器默认的align-items: stretch特性，子元素会自动垂直拉伸填满父容器高度，不需要手动指定百分比高度

修改后的完整代码如下：

.box {
  width: 50px;
  background-color: blue;
}
.row {
  display: flex;
  min-height: 60px;
  background-color: yellow;
}

<div class="row">
  <div class="box"></div>
  <h1>This string needs to be able to wrap</h1>
</div>

原方案失效原因 #

之前给.box设置height: 100%不生效，是因为CSS规范中百分比高度需要父元素有明确指定的height属性值，min-height不算有效参考值，所以会出现盒子无法显示的问题。删掉固定高度后，flex默认的交叉轴拉伸规则会自动处理子元素高度适配，完美匹配父容器的动态高度。

如果需要额外实现文本垂直居中，只需给h1标签添加align-self: center属性即可，不要修改.row的align-items配置，避免破坏.box的自动拉伸特性。

内容的提问来源于stack exchange，提问作者Dallin Davis