flex垂直布局中图片未适配父容器高度导致溢出该如何解决？

• flex 列布局下的子元素默认继承 min-height: auto 属性，该属性会强制容器高度至少等于内部内容高度，因此即使你给 .second 设置了 flex: 1，也会被超出高度的图片撑开
• 现有 CSS 存在两处拼写错误：.flexbox 类中的 maxHeight 不符合CSS属性命名规范，需要改为 max-height；.second 类中的 widht 是拼写错误，需要改为 width
• 图片没有设置适配父容器的宽高限制，会按照原始尺寸渲染，进一步撑开父容器高度导致溢出

1. 给 .second 添加 min-height: 0，覆盖默认的 min-height: auto，允许 flex 子项高度小于内部内容高度，这是修复flex布局子项内容溢出问题的核心配置
2. 把 .second 也设置为 flex 列布局，方便内部文字和图片的高度分配，避免手动计算文字高度
3. 给图片设置适配规则，保证它等比例缩放到适配父容器的可用空间，不会变形也不会溢出
4. 修正CSS中所有拼写错误

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.fullHeight {
  height: 100vh;
  background-color: red;
}
.flexbox {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  width: 100%;
  background-color: green;
}
.first {
  background-color: magenta;
}
.second {
  background-color: yellow;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* 保证文字区块高度不被压缩 */
.second > p {
  flex-shrink: 0;
}
/* 图片自适应规则 */
.second > img {
  flex: 1 1 auto;
  max-width: 100%;
  object-fit: contain;
}

如果需要内容溢出时展示滚动条，也可以给 .second 添加 overflow: auto 属性。

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