如何让Flex容器父元素强制触发滚动溢出？

现有如下代码，父容器设置为display:flex + flex-flow:column，子元素设为200vh高度但无内容，此时父容器不会显示滚动条；但移除display:flex或给子元素填充内容后，滚动条正常出现。需求是即使子元素为空，也要让父容器强制溢出显示滚动条，用于后续通过脚本控制滚动到指定位置。

原代码示例：

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }

            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
            }

            .child {
                height: 200vh;
                width: 100vw;
                background: yellow;
            }

            .parent {
                display: flex;
                flex-flow: column;
                height: 100%;
                background: green;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"> </div>
        </div>
    </body>
</html>

解决方法 #

给子元素添加flex-shrink: 0属性，阻止Flex容器压缩子元素的高度：

<!DOCTYPE html>
<html>
    <head>
        <style>
            * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            }

            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
            }

            .child {
                height: 200vh;
                width: 100vw;
                background: yellow;
                flex-shrink: 0; /* 新增属性 */
            }

            .parent {
                display: flex;
                flex-flow: column;
                height: 100%;
                background: green;
                overflow: scroll;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="child"> </div>
        </div>
    </body>
</html>

原理说明 #

Flex布局中，column方向的子元素默认flex-shrink: 1，这意味着即使你给子元素设置了固定高度，Flex容器也会优先压缩子元素来适配自身的高度限制。当子元素没有内容时，这种压缩行为会直接让子元素的实际高度被压缩到容器高度，导致无法触发溢出滚动。

添加flex-shrink: 0后，子元素会严格保持你设置的200vh高度，超出父容器的100%高度限制，从而触发overflow: scroll显示滚动条。

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