横向滚动容器内行元素Border无法铺满容器宽度问题

这个问题我之前做数据表格类功能的时候也碰到过！核心原因是你的flex行容器默认是块级元素，它的宽度只会撑满父容器的可视区域——哪怕内部内容已经超出，容器本身的宽度并没有跟着内容延伸，所以底部的border就只画到了容器的宽度，横向滚动后自然就看不到后面的部分了。

下面给你两个简单又有效的解决办法：

方案1：给flex容器添加min-width: fit-content #

fit-content这个属性会让容器的宽度自适应内部所有内容的总宽度，这样border-bottom就会跟着内容一起延伸，不会被截断。修改后的代码如下：

<div style="overflow-x: scroll;"> 
  <div style="border-bottom: 1px solid red; display: flex; min-width: fit-content;"> 
    <div style="padding: 15px; white-space: nowrap; ">Item Name</div> 
    <div style="padding: 15px; white-space: nowrap; ">Item Owner</div> 
    <div style="padding: 15px; white-space: nowrap; ">Date Created</div> 
    <div style="padding: 15px; white-space: nowrap; ">Additional Information</div> 
    <div style="padding: 15px; white-space: nowrap; ">Additional Metadata</div> 
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div> 
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div> 
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div> 
  </div> 
</div>

方案2：用inline-flex替代flex #

inline-flex元素的宽度默认由内部内容决定，而不是像块级flex那样撑满父容器。这样同样能让容器宽度跟着内容走，border自然就不会被截断了：

<div style="overflow-x: scroll;"> 
  <div style="border-bottom: 1px solid red; display: inline-flex;"> 
    <div style="padding: 15px; white-space: nowrap; ">Item Name</div> 
    <div style="padding: 15px; white-space: nowrap; ">Item Owner</div> 
    <div style="padding: 15px; white-space: nowrap; ">Date Created</div> 
    <div style="padding: 15px; white-space: nowrap; ">Additional Information</div> 
    <div style="padding: 15px; white-space: nowrap; ">Additional Metadata</div> 
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div> 
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div> 
    <div style="padding: 15px; white-space: nowrap; "><button>A Button</button></div> 
  </div> 
</div>

如果你的列表有多行数据，只要给每一行的容器都加上上述任一属性，就能保证所有行的border都能完整延伸到内容末尾啦～

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