横向滚动容器内行元素底部边框被截断的无JS、无固定像素解决方案咨询

嗨，这个问题我太熟悉了！你遇到的核心问题是.row元素的宽度默认只会撑到容器的100%，不会跟着内部的flex内容一起扩展，所以滚动的时候边框就被截断了。别担心，咱们用纯CSS就能解决，完全不需要JavaScript或者固定像素值。

核心解决方案：使用min-width: fit-content #

只需要给你的.row类加一行CSS：

.row { 
  display: flex; 
  border-bottom: 1px dotted blue;
  min-width: fit-content; /* 关键代码 */
}

为什么这招管用？

fit-content这个值会让元素的宽度自动适配它的内容宽度，同时如果内容比父容器窄的话，min-width还能保证.row依然占满父容器的宽度，完美兼顾两种场景——不管内容多还是少，边框都能完整显示。

修改后的完整代码示例 #

CSS代码：

.table { 
  width: 350px; 
  overflow-x: auto; 
  white-space: nowrap; 
  border: 1px solid red; 
}
.row { 
  display: flex; 
  border-bottom: 1px dotted blue;
  min-width: fit-content; /* 新增这行 */
}
p { 
  width: 50px; 
  flex-shrink: 0; 
}

HTML代码：

<div class="table">
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
  <div class="row">
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
    <p>Hey</p>
  </div>
</div>

备选方案：用display: table布局 #

如果你需要兼容一些更老的浏览器（比如IE），也可以把.table改成display: table，.row改成display: table-row，内部的p改成display: table-cell，这样也能自动让行宽适配内容，边框不会截断。不过这种方法的灵活性不如flex布局，优先推荐上面的fit-content方案。

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