flex布局下为什么父元素overflow属性会影响子img的尺寸？

核心原理是flex布局的min-height默认规则 #

• 你用的是垂直方向的flex容器（flex-direction: column），作为子flex项的.second，其min-height默认值为auto，规范约定该值的作用是flex项的实际高度不得小于内部内容的固有最小高度。
  你用到的图片本身有远大于布局预期的原始尺寸，未加overflow: hidden时，.second会被内部img的原始尺寸撑开，突破父flex容器的高度限制，你给.wrap设置的height: 50%会基于被撑开后的.second高度计算，自然整体就会溢出。

• overflow: hidden的作用并不是直接裁剪内容这么简单，它会触发flex布局的特殊规则：
  当flex项的overflow属性值不为默认的visible时，其min-height的默认值会自动从auto变为0。
  此时.second的min-height限制消失，高度完全由flex分配规则决定：也就是父flex容器总高度减去.first的内容高度后的剩余所有空间，不会被内部内容强行撑开。
  此时.wrap的height: 50%就会基于这个被正确约束的.second高度计算，img设置width: 100%; height: 100%后就能刚好适配父容器尺寸。

替代方案 #

如果你不需要裁剪溢出内容，也可以直接给.second设置min-height: 0，效果和加overflow: hidden完全一致，不需要依赖overflow属性。

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