如何阻止Flex列子元素撑开父容器高度？

你的代码存在几个关键问题，导致.left容器被内容撑开而非出现滚动条：

1. display属性错误：display: row是无效取值，弹性布局的正确写法是display: flex，row是flex-direction的属性值而非display的取值。
2. flex方向设置矛盾：从布局结构看你需要左右分栏，但代码中设置了flex-direction: column（垂直排列），导致子元素纵向占满高度，滚动逻辑失效。
3. 父元素高度无有效参照：若html、body未设置高度，.container的height:100%无法获取有效高度基准，子元素高度计算会出现异常。

修正后的代码 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 确保根元素和body有明确高度，消除默认边距 */
        html, body {
            margin: 0;
            height: 100%;
        }

        .container {
            width: 100%;
            height: 100%;
            display: flex; /* 修正display属性，启用弹性布局 */
            flex-direction: row; /* 设置横向排列，匹配左右分栏需求 */
        }

        .container .left {
            width: 300px;
            height: 100%;
            overflow-y: auto; /* 内容超出时显示垂直滚动条 */
            flex-shrink: 0; /* 防止左侧容器被右侧挤压宽度 */
            border: 1px solid #ccc; /* 可选，方便查看布局边界 */
        }

        .container .right {
            flex: 1 1 auto; /* 右侧容器占满剩余空间 */
            border: 1px solid #ccc; /* 可选，方便查看布局边界 */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="left">
            <!-- 添加大量测试内容验证滚动效果 -->
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
            <p>测试内容</p>
        </div>
        <div class="right">
            右侧内容
        </div>
    </div>
</body>
</html>

关键修正说明 #

• html/body高度设置：给html, body添加height:100%和margin:0，确保.container的height:100%有正确参照，同时消除默认边距避免布局偏移。
• display:flex：修正display属性为flex，启用弹性布局框架。
• flex-direction:row：设置子元素横向排列，匹配左右分栏的布局需求。
• flex-shrink:0：给.left添加该属性，防止其在右侧容器占满空间时被挤压宽度。
• overflow-y:auto：保留该属性，当.left内内容高度超过容器高度时，自动显示垂直滚动条。

如果实际需求是垂直分栏（上下布局），只需将flex-direction改回column，同时给.left设置固定高度或用flex属性控制高度：

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

.container .left {
    height: 200px; /* 固定高度，或用flex: 0 0 200px替代 */
    overflow-y: auto;
    flex-shrink: 0;
}

.container .right {
    flex: 1; /* 占满剩余垂直空间 */
}

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