为什么 `overflow-x: auto;` 在 `flex-direction: row;` 祖先内部表现异常？

Question

我已经阅读了 10 多个关于水平滚动 table 的其他问题，但似乎没有任何内容适用于此问题。

在新项目中使用默认的 Blazor Server 模板 - 使用 Bootstrap 4 构建 - 使用响应式 table.[=19= 时，浏览器 window 的可滚动性不会被消除]

Bootstrap 的 .table-responsive - 使用 overflow-x: auto; 旨在在其父级具有固定宽度时工作。即使这样，window 上的水平滚动条仍然存在。

减少大小写

此示例使用 Bootstrap 的基础 CSS - overflow-x: auto; - 尽可能减少测试用例。问题可能与 flex 的工作方式有关。 flex 父级和 overflow-x: auto; 之间有多个 div。

打开以下 Codeply 视图，将浏览器的宽度减小到最小宽度，注意 table 滚动但 window 仍然滚动。

https://www.codeply.com/v/FbZndMn15v

代码

<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LayoutTest</title>
    <base href="/">
</head>
<body>
    <app style="display: flex; flex-direction: row;">
        <div class="sidebar">
            <div class="top-row pl-4 navbar navbar-dark">
                <a class="navbar-brand" href="">LayoutTest</a>
                <button class="navbar-toggler">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>

            <div class="collapse">
                <ul class="nav flex-column">
                    <li class="nav-item px-3">
                        <a href="" class="nav-link active">
                            <span class="oi oi-home" aria-hidden="true"></span> Home
                        </a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="counter" class="nav-link">
                            <span class="oi oi-plus" aria-hidden="true"></span> Counter
                        </a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="fetchdata" class="nav-link">
                            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div style="width: 500px;">
            <div style="overflow-x: auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </app>
</body>
</html>

Answer 1

这里的解决方案是在父 flex 元素上隐藏 overflow-x 并为其子元素设置 min-width 为 0，该子元素是应该溢出的元素的祖先。

https://www.codeply.com/v/k63CkWZrRH

代码

<html lang="en"><head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LayoutTest</title>
    <base href="/">
</head>
<body>
    <app style="display: flex; flex-direction: row; overflow-x: hidden;">
        <div class="sidebar">
            <div class="top-row pl-4 navbar navbar-dark">
                <a class="navbar-brand" href="">LayoutTest</a>
                <button class="navbar-toggler">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>

            <div class="collapse">
                <ul class="nav flex-column">
                    <li class="nav-item px-3">
                        <a href="" class="nav-link active">
                            <span class="oi oi-home" aria-hidden="true"></span> Home
                        </a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="counter" class="nav-link">
                            <span class="oi oi-plus" aria-hidden="true"></span> Counter
                        </a>
                    </li>
                    <li class="nav-item px-3">
                        <a href="fetchdata" class="nav-link">
                            <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                        </a>
                    </li>
                </ul>
            </div>
        </div>

        <div style="min-width: 0;">
            <div style="overflow-x: auto;">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                            <th scope="col">Heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                            <td>Cell</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </app>
</body>
</html>

为什么 `overflow-x: auto;` 在 `flex-direction: row;` 祖先内部表现异常？

Why does `overflow-x: auto;` behave strangely inside `flex-direction: row;` ancestor?

css

overflow

flexbox

bootstrap-4

blazor-server-side