如何让overflow-x容器内的flex row与子元素同宽并修复表头背景

问题根源 #

1. .row设置width: 100%限制了宽度，无法撑开容器产生横向滚动空间
2. 表头的sticky定位top值错误（-2rem），导致滚动时表头位置偏移、背景显示异常
3. flex-grow: 1与flex: none冲突，导致单元格尺寸行为不符合预期
4. justify-content: space-between会破坏表头与内容列的对齐

修改后的完整代码 #

CSS

.flex-table {
  border: 1px solid #ccc;
  overflow-x: scroll;
  position: relative; /* 为sticky表头提供正确的定位上下文 */
}
.flex-table .headers {
  position: sticky;
  z-index: 20;
  background: #ccc;
  top: 0; /* 将表头固定在容器顶部 */
}
.flex-table .row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  width: 100%;
  min-width: max-content; /* 确保行宽至少容纳所有单元格，触发横向滚动 */
}
.flex-table .row .cell {
  margin: 0.25rem;
  border-right: 1px solid #ccc;
  flex: none; /* 固定单元格尺寸，不收缩不放大 */
  width: 5rem;
}
.flex-table .row .cell:last-child {
  border-right: none;
}

/* 响应式适配：小屏幕缩小单元格宽度 */
@media (max-width: 768px) {
  .flex-table .row .cell {
    width: 4rem;
  }
}

HTML（无需修改）

<div class="flex-table">
  <div class="headers">
    <div class="row">
      <div class="cell">#</div>
      <div class="cell">--</div>
      <div class="cell">Item</div>
      <div class="cell">con</div>
      <div class="cell">qt</div>
      <div class="cell">cos</div>
      <div class="cell">pric</div>
      <div class="cell">GP (unit)</div>
      <div class="cell">Profit</div>
      <div class="cell">QOH</div>
      <div class="cell">ATS</div>
      <div class="cell">SO</div>
      <div class="cell">PO</div>
      <div class="cell">Sourcing Notes</div>
      <div class="cell">dev</div>
    </div>
  </div>
  <div class="bod">
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
    <div class="row">
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
      <div class="cell">--</div>
    </div>
  </div>
</div>

关键修改说明 #

• position: relative给容器添加定位上下文，确保表头sticky时不会脱离容器范围
• top: 0修正表头固定位置，滚动时表头会牢牢粘在容器顶部，背景完整显示
• min-width: max-content让行宽自动适配所有单元格的总宽度，内容超出容器时触发横向滚动
• 移除冲突的flex-grow: 1和justify-content: space-between，保证表头与内容列严格对齐
• 添加媒体查询实现小屏幕适配，优化移动端体验

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