如何在flex布局row/column方向下通过flex-grow/shrink保持图片正常显示

flex 主轴切换为column方向后，flex 子项默认的min-height: auto会让子项高度优先贴合内容高度，本次场景中子项内的图片有原始固有高度，会把子容器撑开，导致flex-grow: 1无法按照预期分配父容器的垂直空间。

方法1：给flex子项设置min-height: 0 #

只需要给两个子容器新增min-height: 0规则即可，代码修改如下：

.img-container-1,
.img-container-2 {
  flex-grow: 1;
  min-height: 0; /* 覆盖默认的min-height: auto */
}
.img-container-1 {
  background-color: brown;
}
.img-container-2 {
  background-color: burlywood;
}

该规则会关闭子项高度自动贴合内容的特性，让flex-grow可以正常分配父容器的可用空间，图片的height: 100%也能基于父容器分配到的高度正常计算适配。

方法2：给flex子项设置overflow: hidden #

和上面的原理一致，overflow属性设置为非visible值时，也会让min-height的默认行为失效：

.img-container-1,
.img-container-2 {
  flex-grow: 1;
  overflow: hidden;
}

这个方法也能实现同样效果，还能避免内容超出子容器时溢出。

方法3：使用flex简写属性 #

直接用flex: 1代替单独设置flex-grow:1，flex:1的完整含义是flex-grow:1; flex-shrink:1; flex-basis:0%，显式指定flex-basis为0后，子项的基础高度会从0开始计算，也会无视内容的原始高度，按flex-grow比例分配空间：

.img-container-1,
.img-container-2 {
  flex: 1; /* 替换原来的flex-grow:1 */
}

不需要强制使用百分比高度实现，上面三种方法都可以达到垂直平分空间、图片自适应的效果，其中使用flex:1的写法是最常用的标准写法，兼容性也最好。

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