外部div尺寸较小时overflow-x:auto不显示滚动条 表格横向滚动问题

• 错误地将overflow-x: auto属性绑定在<table>元素上。表格属于特殊的替换类元素，默认会随内容自动拉伸宽度，该属性无法触发预期的横向滚动效果。
• 最外层.main_card-table设置的overflow: hidden会直接裁切超出宽度的内容，完全屏蔽内层的滚动触发逻辑。
• 表格未设置强制不换行规则，单元格内容会自动换行压缩宽度，导致表格始终无法达到触发滚动的固有宽度阈值。
• 单元格仅设置了纵向内边距，横向间距不足，视觉展示拥挤。

原页面的HTML结构不需要做任何调整，仅替换对应CSS规则即可实现预期效果。
触发横向滚动的必要条件是：滚动容器有明确的、小于内部内容宽度的可计算宽度，只要把滚动属性绑定到符合该条件的元素上即可：

1. 移除<table>元素上原本的overflow-x: auto设置
2. 将滚动属性绑定到直接包裹表格的.main_card-table-content元素上
3. 给表格添加white-space: nowrap属性，强制所有单元格内容不自动换行，按内容固有宽度计算表格尺寸，保证列间距充足
4. 给单元格补充横向内边距，拉开列与列的视觉距离
5. 调整.main_card-table-content的内边距设置，避免padding挤占内部滚动区域的可用宽度

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-size: 0.875em;
  font-weight: 400;
  line-height: 1.5;
  color: #444;
  font-family: "Roboto", "Open Sans", sans-serif;
}

/* 通用表格样式 */
table {
    background-color: white;
    width: auto;
    border-collapse: collapse;
    white-space: nowrap; /* 强制内容不换行 */
}

tr {
    border-bottom: 1px solid #dde0e6;
}

th, td {
    padding: 8px 16px; /* 横向内边距保证列间距 */
    text-align: left;
    vertical-align: top;
}

.main_card-table {
  width: 400px;
  grid-area: table;
  display: flex;
  flex-direction: column;
  background-color: white;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #d8dbe0;
}

.main_card-table-content {
  width: 100%;
  flex: 1;
  padding: 16px 0;
  overflow-x: auto; /* 核心滚动属性挂载位置 */
}

• 原.main_card-table-content上的左右32px内边距如果直接保留，会和内部的横向滚动区域叠加，导致滚动位置偏移。如果需要保留该内边距，可在滚动容器与表格之间新增一层自适应宽度的包裹元素，将padding设置在这层元素上，让padding属于表格内容区的一部分，不影响滚动宽度的计算。
• 当表格实际固有宽度小于外层400px的容器宽度时，滚动条会自动隐藏，不会干扰常规展示效果。

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