实现溢出滚动时子行填充父div宽度的解决方案

核心修复思路 #

滚动容器内的行元素未与滚动区域宽度绑定，且内部flex容器未强制撑满父容器，导致行宽不足、背景无法铺满。通过以下CSS调整解决：

1. 给表头、行容器添加宽度约束，确保内容不足时撑满父容器，内容超出时自适应宽度
2. 强制内部flex列容器撑满父容器，让列宽均匀分配

修改后的完整CSS代码 #

.container {
  max-width: 700px;
  margin: 0 auto;
  background: #FFF;
  padding: 1rem;
  border-radius: 1rem;
}

.table1 {
  overflow-x: auto;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
  scrollbar-width: thin;
}

.table1__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .5rem;
  min-width: 100%;
  width: fit-content;
}

.table1__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table1__body__row {
  border: 1px solid red;
  padding: .5rem;
  border-radius: .25rem;
  min-width: 100%;
  width: fit-content;
}

.table1__body__row:not(.table1__body__row:last-child) {
  margin-bottom: 1rem;
}

.table1__body__row__cols {
  display: flex;
  gap: 32px;
  width: 100%;
}

.table1__body__row__cols>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2 {
  margin-top: .5rem;
  border: 1px solid #e0e0e0;
  padding: 0.5rem;
  border-radius: .25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.table2__head {
  display: flex;
  gap: 32px;
  align-items: center;
  padding: .25rem .5rem;
  min-width: 100%;
  width: fit-content;
}

.table2__head>div {
  flex: 1 0 120px;
  min-width: 120px;
}

.table2__body__row {
  display: flex;
  gap: 32px;
  border: 1px solid blue;
  padding: .5rem;
  border-radius: .25rem;
  min-width: 100%;
  width: fit-content;
}

.table2__body__row>div {
  flex: 1 0 120px;
  min-width: 120px;
}

关键修改说明 #

• min-width: 100%：强制元素在内容宽度小于父容器时，完全填充可用空间，解决背景留白问题。
• width: fit-content：当内容宽度超出父容器时，元素宽度自适应内容，保证横向滚动时所有内容可见。
• .table1__body__row__cols 设置 width:100%：让内部flex列基于行容器的完整宽度计算，实现列宽均等分配。
• 给.table2添加overflow-x: auto：嵌套子表格也需要独立的横向滚动，避免影响外层表格布局。

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