关于Flex、Height与Overflow的滚动行为疑问

我遇到了一个困惑的行为：在column方向的flex容器中，堆叠着高度100px的绿色盒子和包含400px黄色盒子的蓝色容器。当窗口高度小于500px时，body会出现滚动条（符合预期）；但当窗口高度小于400px时，蓝色盒子也会出现滚动条，原本预期只会出现其中一种滚动条，想知道背后的原理。

代码示例 #

CSS代码 #

*,
::before,
::after {
    box-sizing: inherit;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    /* overflow: visible; */
}

.full-size {
    width: 100%;
    height: 100%;
}

.container {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1;
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>Hi</title>
    <base href="/" />
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

<body>
    <div class="full-size container">
        <div style="width:300px; height: 100px; background-color: green; flex-shrink: 0;">Upper content</div>
        <div class="full-size content">
            <div class="full-size" style="overflow: auto; background-color: blue;">
                <div style="width:300px; height: 400px; background-color: yellow;">Lower content</div>
            </div>
        </div>
    </div>
</body>

</html>

原因分析 #

核心问题出在.content元素同时设置了height:100%（来自.full-size类）和flex:1属性，两者的高度计算逻辑冲突：

1. flex布局的预期逻辑：在column方向的flex容器中，flex:1会让.content占据容器的剩余空间——也就是视口高度 - 绿色盒子的100px，这样容器总高度等于视口高度，不会触发body滚动。
2. height:100%的强制作用：这个属性会让.content的高度强制等于flex容器的100%（即视口高度），加上绿色盒子的100px，总高度超过了flex容器的高度，导致flex容器溢出body，触发body的滚动条。

分场景具体看：

• 窗口高度在400px~500px之间：.content的高度被强制设为视口高度，总高度（100px+视口高度）>视口高度，body出现滚动条；此时.content的高度≥300px（比如窗口450px时，.content高度450px），黄色盒子400px能被蓝色盒子容纳，所以蓝色盒子无滚动条。
• 窗口高度<400px：.content高度仍为视口高度（比如300px），总高度100px+300px=400px>300px，body继续保持滚动条；同时蓝色盒子高度等于.content的300px，小于黄色盒子的400px，触发overflow:auto，蓝色盒子也出现滚动条。

解决方法 #

只需去掉.content元素的height:100%属性（比如移除.full-size类），让flex:1完全控制其高度：

• 窗口高度<500px时，.content高度为视口高度-100px，蓝色盒子继承这个高度；当该高度<400px时，蓝色盒子出现滚动条，而容器总高度等于视口高度，不会溢出body，因此只有蓝色盒子有滚动条。

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