Flex布局交叉轴收缩带滚动条失效（Firefox兼容问题？）

问题描述 #

预期布局效果：

• 顶部绿色header和左侧sidebar始终固定在视口
• 滚动区域为粉色workbench_container
• 内容较小时灰色footer位于可视区底部；内容过大时footer随workbench_container滚动

该布局在Chrome中表现正常，但Firefox中失效：切换#content的small/large类时，workbench_container会被子元素撑高，无法出现滚动条。仅设置固定高度时Firefox才会显示滚动条，但内容高度未知，设置height:100%也无效。额外限制：footer高度未知，无法使用CSS calc方案。

原因分析 #

这并非Firefox的Bug，而是浏览器对Flexbox规范中容器最小尺寸的实现差异：

• Firefox中，flex容器的min-height/min-width默认值为auto，意味着容器会被内部内容撑开，不会收缩到小于内容尺寸，导致滚动条无法触发
• Chrome等浏览器对flex容器的最小尺寸处理更严格，会遵循父容器的空间约束

解决方案 #

通过给嵌套的flex容器添加min-height: 0（或min-width: 0，针对横向布局），打破内容对容器尺寸的强制撑开约束，让容器能够遵守父级的空间限制，从而触发滚动。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="">
<head>
    <title>Flex Box Test</title>
    <style>
        * {
            box-sizing: border-box;
            position: relative;
        }
        html,
        body {
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            overflow: clip;
        }
        header,
        div {
            border-width: 6px;
            border-style: solid;
            text-align: center;
            overflow: clip;
        }
        header,
        #content,
        #footer {
            padding: 1em;
        }
        header {
            border-color: #090;
            background-color: #0c0;
            color:  #030;
            flex: none;
        }
        #application_container {
            border-color: #c90;
            background-color: #fc0;
            color:  #330;
            flex: auto;
            display: flex;
            flex-direction: row;
            /* 给横向flex容器添加min-height，防止被纵向内容撑开 */
            min-height: 0;
        }
        #sidebar {
            border-color: #ccc;
            background-color: #fff;
            color:  #999;
            flex: none;
            width: 150px;
        }
        #workbench_container {
            border-color: #f3f;
            background-color: #f6f;
            color:  #939;
            flex: auto;
            display: flex;
            flex-direction: column;
            overflow: auto;
            /* 关键：打破内容对容器最小高度的约束 */
            min-height: 0;
        }
        #content_container {
            border-color: #36c;
            background-color: #69f;
            color:  #039;
            flex: 1 0 auto;
            /* 允许内容容器收缩，配合父容器滚动 */
            min-height: 0;
            overflow: auto;
        }
        #content {
            border-color: #900;
            background-color: #c00;
            color:  #300;
        }
        #content.small {
            min-height: 150px;
        }
        #content.large {
            min-height: 1500px;
        }
        #footer {
            border-color: #999;
            background-color: #ccc;
            color:  #333;
            flex: none;
        }
    </style>
<head>
<body>
    <header>The header shall always be visible at the top</header>
    <div id="application_container">
        <div id="sidebar">This is the sidebar</div>
        <div id="workbench_container">
            <div id="content_container">
                <!-- Toggle the class between "small" and "large" to see the effect -->
                <div id="content" class="small">
                    This is the real content whose size is unknown in advance.
                    Hence, it is wrapped into a content container which is at least as large as the actual content,
                    but can grow such that the footer is at the bottom.
                </div>
            </div>
            <div id="footer">
                For small content the footer shall be located at the bottom.
                But for large content the footer shall be placed at the end of the content and be scrolled as part of the (pink) workbench container.
            </div>
        </div>
    </div>
</body>
</html>

关键修改点 #

• 给#application_container添加min-height: 0：防止纵向内容撑开横向flex容器
• 给#workbench_container添加min-height: 0：核心修改，让粉色容器能够遵守父级的高度限制，触发滚动
• 给#content_container添加min-height: 0和overflow: auto：确保内容容器在空间不足时可以滚动，同时不影响footer的定位

这样修改后，无论是Chrome还是Firefox都能实现预期的布局效果：内容较小时footer固定在可视区底部，内容过大时footer随滚动区域一起滚动，header和sidebar始终固定。

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