Flex布局下HTML表格overflow-x属性失效问题问询

问题原因 #

在flex布局中，flex子元素（这里的.grid6）默认具有min-width: auto的特性，这会让子元素的宽度自动适配内部内容的宽度，导致内部设置了overflow-x:auto的容器无法获得有效的宽度限制——表格会直接撑破外层容器，自然不会触发横向滚动。

修复方案 #

有两种简单的解决方式：

方案1：给flex子元素添加min-width: 0 #

修改.grid6的样式，允许它收缩到小于内容宽度，这样内部的overflow容器就能正常工作：

.grid6 {
  flex-basis: 100%;
  padding: 4px;
  min-width: 0; /* 新增：解除flex子元素的最小宽度限制 */
}

方案2：给表格外层容器添加overflow: hidden #

给.table__outer添加overflow: hidden，同样可以限制内部宽度，让overflow-x:auto生效：

.table__outer {
  overflow: hidden; /* 新增：限制外层容器宽度 */
}

修复后的完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
   table {
     border-collapse: collapse;
     border-spacing: 0;
     width: 100%;
     border: 1px solid #ddd;
   }
   .container {
     display: flex;
     flex-wrap: wrap;
     height: 100%;
     min-width: 320px;
   }
   .grid6 {
     flex-basis: 100%;
     padding: 4px;
     min-width: 0; /* 方案1的修改 */
   }
   /* .table__outer {
     overflow: hidden; 方案2的修改，二选一即可
   } */
   th, td {
     text-align: left;
     padding: 8px;
   }
</style>
</head>
<body>
   <h2>Responsive Table</h2>
   <div class="container">
      <div class="grid6">
         <div class="table__outer">
            <div style="overflow-x:auto;">
               <table>
                  <tr>
                     <th>First Name</th>
                     <th>Last Name</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                     <th>Points</th>
                  </tr>
                  <tr>
                     <td>Jill</td>
                     <td>Smith</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                     <td>50</td>
                  </tr>
                  <tr>
                     <td>Eve</td>
                     <td>Jackson</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                     <td>94</td>
                  </tr>
                  <tr>
                     <td>Adam</td>
                     <td>Johnson</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                     <td>67</td>
                  </tr>
               </table>
            </div>
         </div>
      </div>
   </div>
</body>
</html>

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