flex: 1如何影响flex子项高度？固定高度容器图片溢出求解

核心规则前置 #

flex:1是三个flex子项属性的简写，完整等价于：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

该属性默认只沿flex容器的主轴分配剩余空间：容器默认flex-direction:row时主轴为水平方向，flex:1仅控制子项宽度分配；只有手动设置flex-direction:column将主轴改为垂直方向时，flex:1才会参与垂直方向的空间分配。

代码溢出的根本原因 #

溢出是高度传递断层、flex默认规则叠加的结果，沿DOM层级梳理计算逻辑即可定位：

• 最外层#about设置的height:500px是固定有效值，但它的直接子元素.row没有设置任何高度属性，作为普通块级元素默认height:auto，高度完全由内部内容撑开，不会自动继承父级的500px高度。
• .row作为flex容器，默认align-items:stretch，理论上子项会拉伸到和容器等高，但这个规则生效的前提是flex容器本身有明确可计算的高度。当容器高度为auto时，拉伸逻辑不会生效，子项高度由自身内容决定。
• 两个.column设置的flex:1此时仅做宽度均分，垂直方向没有约束：右侧列高度由内部文本行数决定，左侧列内的img设置了height:100%，但父元素.column没有明确高度，百分比高度失去计算基准，会按照图片原始宽高比、结合width:100%的设置渲染原始尺寸高度。
• 最终.row的高度被两列内容的总高度撑开，远超过外层#about的500px限制，就出现了溢出。

修复方案 #

补上高度传递的断层即可解决问题，修改.row样式让它继承父级高度：

.row {
  display: flex;
  height: 100%; /* 新增该行，获取#about的500px高度 */
}

修改后.row有了明确的500px高度，两个.column会通过默认的align-items:stretch自动拉伸到500px等高，此时img的height:100%有了明确的计算基准，会填满父列高度。如果要避免图片拉伸变形，可以给img补充object-fit: cover属性，保持比例裁剪填充。

如果需要控制右侧文本不溢出，可以给文本列追加overflow: auto，让超长内容在列内滚动即可。

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