flex-grow: 1 导致的滚动内容无限撑开父容器（嵌套 flex 导致 overflow: auto 失效）| 左右布局右边元素被挤出屏幕

林钟一六

于 2024-07-28 01:07:16 发布

阅读量399

点赞数 4

分类专栏：少见问题解决文章标签： css javascript css3 html5 前端 html

本文链接：https://blog.csdn.net/qq_41567818/article/details/140743972

版权

少见问题解决专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="cn">
    <style>
        .block {
            width: 800px;
            height: 30px;
            background-color: green;
            flex-shrink: 0;
        }
    </style>
    <body style="display:flex;height: 100%;background-color:red;">
        <div id="father" style="background-color:white;height: 200px;flex-grow: 1;">
            <div id="target" style="gap: 5px;display:flex;overflow-x: auto">
                <div class="block"></div>
            </div>
        </div>
        <div style="width: 300px;height: 200px;background-color:black;flex-shrink: 0"></div>
    </body>
</html>

在上面的代码中，我们期待实现“左右布局”，如下图：

此时效果显示正常，但是当我们加入更多的“block” 绿色盒子元素时会出现非预期的情况：盒子“target”会无限容纳“block”，overflow-x: auto 失效了，没有出现滚动条，随之引起其父元素“father”也被无限撑大，直接超出了屏幕的大小，挤开了我们需要固定在最右侧的黑色方块，如下图：

这个问题主要是 flex-grow: 1 引起的，这个概念可以搜索“Intrinsic and Extrinsic Sizing”以深入了解浏览器对于内容大小的计算机制逻辑。简单来说，就是 flex-grow: 1 启用时，该元素会无限“贪婪”的吃掉剩余的空间，并且尽可能的多容纳内部元素，他会不断向上检查，直到碰到了一个“固定大小”的元素，才会停止“贪婪”。

知道了原理，那么想要解决这个问题就十分简单了，我们只要给予“father”盒子一个具体的宽度值即可，如：“width: 0”。你没有看错，0 也可以，只要让 flex-grow: 1 知道不能无限增长即可，给予其父元素具体的宽度数值它便会停止增长宽度，直到适配屏幕的大小，效果图：

完美达到了我们所需的效果，overflow 成功生效，完整代码：

<!DOCTYPE html>
<html lang="cn">
    <style>
        .block {
            width: 800px;
            height: 30px;
            background-color: green;
            flex-shrink: 0;
        }
    </style>
    <body style="display:flex;height: 100%;background-color:red;">
        <div id="father" style="background-color:white;height: 200px;flex-grow: 1;width: 0;">
            <div id="target" style="gap: 5px;display:flex;overflow-x: auto">
                <div class="block"></div>
                <div class="block"></div>
                <div class="block"></div>
            </div>
        </div>
        <div style="width: 300px;height: 200px;background-color:black;flex-shrink: 0"></div>
    </body>
</html>