Css Flexbox:flex 1在img太大且高度为100%时变大

我想用Flexbox在CSS中制作一个典型的页眉/内容/页脚布局。页眉和页脚应具有固定大小。内容应该随包装器扩展，所以我想我给它一个flex属性1

工作得很好，但我希望在内容分区中有一个img，可以在分区高度上扩展到100%

对于小图像，它可以工作，但当它超过内容div的大小时，div将缩放到img

我对问题进行了建模：

.wrapper{
显示器：flex；
弯曲方向：立柱；
高度：200磅；
背景：灰色；
}
.a{
高度：50磅；
背景：蓝色；
}
.b{
弹性：1；
背景：红色；
}
.b img{
身高：100%；
}
c{
高度：50磅；
背景：绿色；
}

---

flex出现这种情况的原因是默认情况下flex容器不能小于其内容。因此，即使您将其高度设置为100%，当您将更多内容放入其中时，它也会扩展

解决方案是在此flex容器上使用最小高度：0

.wrapper{
显示器：flex；
弯曲方向：立柱；
高度：200磅；
背景：灰色；
}
.a{
高度：50磅；
背景：蓝色；
}
.b{
弹性：1；
背景：红色；
最小高度：0；
}
.b img{
身高：100%；
}
c{
高度：50磅；
背景：绿色；
}

---

我认为最好的解决方案是不使用包装的固定高度，以允许包装根据其内容进行缩放。另外，给图像显示块以消除不必要的间距：

.b img{
  display: block;
}

.wrapper{
  min-height:200pt;
}

---

哇，这是不直观的，但你完全正确，就像一个魅力：）非常感谢你