overflow-x:auto下CSS样式未应用于横向溢出区域的问题求助

你的问题出在Grid行容器的宽度计算上：.profile-flights-list-row作为Grid布局的容器，默认会继承父容器的100%宽度。当Grid列的总宽度超过父容器时，虽然父容器开了overflow-x:auto能横向滚动，但行元素本身的宽度还是被限制在父容器可视区域内，导致溢出的内容部分没有行的背景、边框样式。

直接给.profile-flights-list-row加一行width: fit-content;就能解决：

.profile-flights-list-row {
  display: grid;
  grid-template-columns: minmax(5rem, 2fr) minmax(5rem, 2fr) minmax(5rem, 2fr) minmax(5rem, 2fr) minmax(15rem, 6fr) minmax(7.5rem, 3fr) minmax(5rem, 2fr) minmax(2.5rem, 1fr);
  align-items: center;
  border-bottom: 1px solid #ccc;
  text-align: center;
  flex-shrink: 0;
  width: fit-content; /* 新增：让行宽度适配Grid列总宽度 */
}

这样行元素的宽度会根据所有Grid列的总宽度自动调整，横向滚动时整个行的样式（背景、边框）都会铺满溢出部分。

另外注意：如果.profile-flights-list-body里的行也是.profile-flights-list-row类，这个样式会自动生效，能保证表头和表体的行宽度一致，避免滚动时错位。

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