Flex布局中如何限制flex-grow容器内元素宽度，避免布局溢出？

问题场景 #

用flex flex-row实现网页主布局，左侧是固定宽度的侧边栏，右侧通过grow属性让主内容列占满剩余宽度。但屏幕宽度缩小时（示例用200px父容器模拟），主列内的宽表格会撑大容器，导致左侧侧边栏被压缩，无法维持固定宽度。需要让表格在主列内显示横向滚动条，同时保留原有Flex布局结构。

原示例代码 #

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<div class="flex flex-row" style="width: 200px;">
    <div style="background-color: gray; width: 50px;">&nbsp;</div>
    <div style="background-color: lightgray;" class="grow">
        <div class="overflow-x-scroll">
            <table>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                        <td>15</td>
                        <td>16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                        <td>20</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>
</html>

解决方案 #

给右侧的主内容列添加min-w-0（对应CSS的min-width: 0）即可解决问题。

原理 #

Flex布局中，项目默认的min-width值为auto，这会让容器优先保证子元素的最小显示宽度，从而撑大自身。设置min-width: 0后，Flex项目允许自身宽度收缩到小于子元素的宽度，此时内部的overflow-x-scroll就能正常触发横向滚动，同时左侧侧边栏的固定宽度也能得到保留。

修改后的代码 #

<html>
<head>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body>

<div class="flex flex-row" style="width: 200px;">
    <div style="background-color: gray; width: 50px;">&nbsp;</div>
    <!-- 添加min-w-0类 -->
    <div style="background-color: lightgray;" class="grow min-w-0">
        <div class="overflow-x-scroll">
            <table>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>2</td>
                        <td>3</td>
                        <td>4</td>
                        <td>5</td>
                        <td>6</td>
                        <td>7</td>
                        <td>8</td>
                        <td>9</td>
                        <td>10</td>
                        <td>11</td>
                        <td>12</td>
                        <td>13</td>
                        <td>14</td>
                        <td>15</td>
                        <td>16</td>
                        <td>17</td>
                        <td>18</td>
                        <td>19</td>
                        <td>20</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

</body>
</html>

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