如何搭配flex-1和height:0使用

相信大家都有使用过 flex-1 来自动撑满父容器的一个经历，如下

但是经常会遇到一个意料外的行为是，当子元素高度超过剩余的高度，那么父元素的高度也会被撑开，并且挤压 .header 的空间，如下

我们通常是增加 overflow 属性来修复这个行为，如下

但当使用 overflow ，其滚动也就不是使用 body 进行滚动了。但我们即想使用 body 滚动又想限制元素的高度怎么办？可以使用一个看起来很魔法 🪄 的 trick，将 overfow 替换为 min-height: 0 即可，如下可以看到当子元素 .content 高度超过父元素 .main 时使用 body 滚动(左一)。未超过父元素时，父元素 .main 高度为剩余高度(右一)。均符合预期～

顺带一提，父元素使用 overflow 也会使子元素的 position: sticky; 没有粘滞效果。
所以在绝大部分情况下在 flex 布局下推荐使用 width:0 或 height: 0 限制元素的宽度和高度

原理： flex: 1 等同于 flex: 1 1 0，两者都是以下的简写等价物。 flex-grow。1 flex-shrink: 1 flex-base: 0 flex-base: 0 = 高度: 0 在这种情况下。 如果这个 flex-basis / height 规则本身，那么你就会有你预期的行为。该元素将有 0 的高度。 然而，在自由空间被其他 flex 属性分配之前，这些属性只设定了一个 flex 项目的初始主要尺寸。 使用 flex-grow: 1，在考虑了 flex-base / height 之后，.main 将消耗该列的所有可用空间。