Flexbox容器内div的水平滚动条不显示问题咨询

原本可正常显示水平滚动条的表格，放入Flexbox容器后滚动条不再显示，请问原因是什么？

相关代码 #

文件 TestLayout1.razor #

@inherits LayoutComponentBase
@Body

文件 TestPage1.razor #

@page "/testPage1"
@layout TestLayout1

<div class="pageContainer">
<div class="navItem">
    <a href="">Main Page</a>
    <a href="counter">Counter</a>
</div>
<div class="pageItem">
    <p>Content</p>
    <div class="tableAntContainer">
        <table class="tableAnt">
            <thead>
                <tr>
                    <th>A1</th>
                    <th>A2</th>
                    <th>A3</th>
                    <th>A4</th>
                    <th>A5</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>0.5</th>
                    <th>0.85</th>
                    <th>0.37</th>
                    <th>0.7</th>
                    <th>0.7</th>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</div>

<div class="tableAntContainer">
<table class="tableAnt">
    <thead>
        <tr>
            <th>A1</th>
            <th>A2</th>
            <th>A3</th>
            <th>A4</th>
            <th>A5</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>0.5</th>
            <th>0.85</th>
            <th>0.37</th>
            <th>0.7</th>
            <th>0.7</th>
        </tr>
    </tbody>
</table>
</div>

文件 TestPage1.razor.css #

body {
overflow-x: hidden;}

.pageContainer {
border:2px solid black;
display: flex;
height:200px;}

.navItem{
background-color:aquamarine;
padding:1rem;}

.pageItem {
background-color: antiquewhite;
padding: 1rem;
flex: 1;}

.tableAntContainer {
border: 3px solid red;
display: flex;
overflow-x: auto;}

.tableAnt {
border: 1px solid black;
table-layout: fixed;
width: 500px;
margin: 0 auto;}

.tableAnt th {
border: 1px solid black;
text-align: center;
width: 120px;}

.tableAnt td {
border: 1px solid black;
text-align: center}

问题原因 #

核心问题出在Flex容器的默认布局规则和元素溢出控制上：

1. Flex项目的无限制宽度：pageItem作为pageContainer的Flex子项，设置了flex:1会填充剩余空间，但Flex项目默认min-width:auto，会跟着内部表格的宽度无限拉伸，不会主动收缩。这导致tableAntContainer的宽度被撑到和表格一样，完全不需要滚动。
2. 全局溢出隐藏：body设置了overflow-x:hidden，当表格宽度超出视口时，溢出部分直接被隐藏，连滚动条的显示空间都被抹掉了。

简单说：Flex容器里的pageItem没宽度限制，会跟着表格放大，滚动条根本没触发的机会；就算有溢出，也被body的隐藏规则直接盖住了。

解决方案 #

只需修改pageItem的CSS，给它加上宽度限制和溢出控制：

.pageItem {
background-color: antiquewhite;
padding: 1rem;
flex: 1;
/* 添加以下两行 */
min-width: 0;
overflow-x: hidden;
}

• min-width:0：打破Flex项目的最小宽度默认值，允许它收缩到小于内容宽度；
• overflow-x:hidden：限制pageItem内部内容不超出自身宽度，这样tableAntContainer就会被约束在pageItem的可用宽度内，触发自身的overflow-x:auto显示滚动条。

或者也可以直接给tableAntContainer加max-width:100%，强制它不超出父元素宽度：

.tableAntContainer {
border: 3px solid red;
display: flex;
overflow-x: auto;
max-width: 100%;
}

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