为什么我的flexbox布局的div元素存在大量多余空白高度？

问题根源 #

• 你为.container5_img设置的height: 50%属于百分比高度，而它的父容器#container5没有定义明确的高度值，浏览器无法解析这个50%对应的具体数值，会默认按照图片的原始高度渲染，最终导致容器出现多余高度。
• min-height: 0是解决flex子项内容溢出压缩失效问题的方案，和本次问题场景不匹配，因此设置后不生效。

解决方案 #

根据你的实际需求选择对应方案即可：

1. 需要固定容器总高度：给#container5添加明确高度值，示例：

#container5 {
  display: flex;
  flex-direction: column;
  margin: 2rem;
  justify-content: center;
  height: 800px; /* 按需修改为你需要的总高度 */
}

此时图片的height: 50%会自动计算为400px，不会出现多余高度。

2. 不需要固定容器高度，仅需控制图片高度：将图片的height: 50%替换为具体的固定单位数值，示例：

.container5_img {
  margin-top: 4rem;
  width: 100%;
  object-fit: cover;
  height: 400px; /* 按需调整，也可以用vh等相对单位 */
  margin-bottom: 2rem;
}

3. 不需要限制图片高度，按原始比例自适应：直接删除.container5_img中的height: 50%属性即可，浏览器会根据图片宽度自动计算匹配的高度，不会产生多余留白。

内容的提问来源于stack exchange，提问作者João Silva