Chrome与Firefox的Flex布局差异：图片百分比高度子元素问题

问题场景 #

嵌套Flex结构中：

• 父容器.row设为display:flex，固定高度50px
• 子元素.col是未设置高度的Flex容器，保持默认align-items:stretch
• 内部图片设置height:100%

Chrome与Firefox/Safari表现出现分歧：

• Firefox/Safari：.col被拉伸至父容器的50px高度，图片高度继承该值，按比例缩放宽度，整体不超出父容器范围
• Chrome：.col被内部图片撑开，高度超过父容器的50px，图片保持原始宽高比但突破了父容器的高度限制

规范依据与正确判定 #

根据CSS Flexbox规范（CSS Flexible Box Layout Module Level 1），正确的行为应该是Firefox和Safari的实现：

1. Flex子项的交叉轴拉伸：父Flex容器默认的align-items:stretch会让未设置明确高度的子Flex容器（.col）拉伸至与父容器交叉轴高度一致，也就是.row的50px高度。
2. 百分比高度的解析逻辑：图片的height:100%以父元素（.col）的已确定高度为基准。由于.col的高度已被父容器拉伸至50px，图片的高度应等于50px，同时按原始宽高比自动调整宽度。

Chrome的实现存在偏差：它错误地让内部图片的尺寸反向影响了.col的高度计算，忽略了父Flex容器对.col的拉伸约束，不符合规范中交叉轴尺寸的计算优先级。

临时修复方案 #

若要让Chrome的表现符合规范，只需给.col显式设置height:100%，强制其继承父容器高度，图片的height:100%就能正确解析为50px：

.col {
  display: flex;
  border: 1px solid blue;
  height: 100%;
}

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