CSS Min-Width适配困境：Box-Sizing与Overflow滚动条冲突问题

核心思路是让两个表格的盒模型规则一致，同时通过容器的溢出控制，解决全屏和窗口缩小场景下的表头对齐问题。

• 统一盒模型为border-box：给两个表格及外层容器都设置box-sizing: border-box，这样padding会被纳入宽度计算，避免全屏时width:100%将padding挤出屏幕的问题。
• 调整滚动容器的内边距逻辑：不用单独给下方表格加padding-right，而是给下方的滚动div添加等于滚动条宽度的右侧内边距，让表格继承容器宽度（包含padding）。当滚动条出现时，表格内容自动留出滚动条位置，和上方表头自然对齐。
• 统一min-width与外层横向滚动：给上下外层div、两个表格设置相同的min-width，同时给最外层Grid组件添加overflow-x: auto。当窗口小于min-width时，整个组件出现横向滚动条，保证两个表格宽度始终一致，不会出现表头额外收缩。

具体代码示例 #

/* 统一盒模型 */
.table-container, .sticky-table {
  box-sizing: border-box;
}

/* 上方表头容器 */
.header-container {
  min-width: 800px; /* 自定义最小宽度 */
}

/* 下方滚动容器 */
.scroll-container {
  min-width: 800px;
  max-height: 400px; /* 触发垂直滚动的高度阈值 */
  overflow-y: auto;
  /* 用CSS变量存储滚动条宽度，默认值适配多数浏览器 */
  padding-right: var(--scrollbar-width, 17px);
}

/* 两个表格统一样式 */
.sticky-table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}

滚动条宽度动态计算（可选） #

如果需要精确适配不同浏览器的滚动条宽度，可通过JS计算后设置CSS变量：

const scrollContainer = document.querySelector('.scroll-container');
const scrollbarWidth = scrollContainer.offsetWidth - scrollContainer.clientWidth;
document.documentElement.style.setProperty('--scrollbar-width', `${scrollbarWidth}px`);

为何不修改table1的min-width？ #

直接给table1增加滚动条宽度的min-width虽能临时解决问题，但不够灵活：不同浏览器滚动条宽度存在差异，且当滚动条因内容高度不足消失时，表头右侧会多出空白，破坏布局一致性。上述方案能自动适配滚动条的显示/隐藏状态，同时覆盖全屏和窗口缩小的所有场景。

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