div溢出区域无样式：水平滚动类表格行样式仅生效于可见元素

我明白你遇到的困扰了——你用div模拟可水平滚动的类表格结构，结果行的样式（比如那个红色下边框）只在初始可见区域生效，滚动到超出视口的内容部分时，样式就消失了。这其实是flex容器的宽度默认行为导致的。

问题根源 #

你的.outer（行容器）是flex布局，但默认情况下它的宽度会继承父元素.box的宽度（20em），而里面的.inner单元格总宽度远超过这个值时，.outer的内容会溢出，但它自身的宽度并没有被撑开。所以border-bottom这类依赖容器宽度的样式，只会在.box的可见宽度范围内显示。

解决方案 #

只需要给.outer添加width: fit-content;，让行容器的宽度被内部单元格的总宽度撑开，这样样式就能贯穿整个行的长度了。

修改后的完整代码 #

.inner { 
  flex: 1 0 10em; 
  height: 2em; 
  background-color: green; 
} 
.outer { 
  border-bottom: 10px solid red; 
  display: flex; 
  width: fit-content; /* 关键新增属性 */
} 
.box { 
  width: 20em; 
  overflow-x: scroll; 
}

<div class="box">
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
  <div class="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
  </div>
</div>

额外说明 #

如果需要兼容一些老版本浏览器（比如IE），可以补充前缀兼容写法：width: -moz-fit-content;和width: -webkit-fit-content;，不过现代浏览器直接使用fit-content就足够了。

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