Flexbox表格自定义滚动布局实现问题：固定头尾、横竖独立滚动开发咨询

你的需求可以实现，不需要额外定义更多宽高参数，仅靠你提到的三类尺寸即可完成。

背景丢失原因 #

表头、表格行的宽度默认继承父容器#table的可视区域宽度，横向滚动时超出可视区的部分没有对应元素背景填充，所以会出现背景丢失的问题。

解决方案 #

只需要修改几处CSS属性即可：

• 给#table添加flex: 1、display: flex、flex-direction: column属性：前者让表格区域自动占满容器扣除头尾后的剩余高度，后者实现表头和表体的纵向高度分配
• 给#tableHeader、.tableRow添加width: fit-content属性：让二者宽度跟随所有单元格的总宽度自动撑开，横向滚动时全程都有背景
• 给#tableBody添加flex: 1属性：让表体自动占满表格区域扣除表头后的剩余高度，保证纵向滚动正常生效

修改后的完整CSS代码如下：

#container {
  width: 400px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

#header, #footer {
  background-color: #666;
}

#table {
  overflow-x: scroll;
  overflow-y: hidden;
  /* 新增属性 */
  flex: 1;
  display: flex;
  flex-direction: column;
}

#tableHeader {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #AAA;
  /* 新增属性 */
  width: fit-content;
}

#tableBody {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  /* 新增属性 */
  flex: 1;
}

.tableRow {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  background-color: #DDD;
  /* 新增属性 */
  width: fit-content;
}

.tableCell {
  padding: 4px;
  width: 300px;
  flex-shrink: 0;
  border: solid 1px black;
}

.fixedSize {
  width: 40px;
  height: 40px;
  background-color: blue;
}

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