具有溢出-x 的 Flex 容器未占用父容器的全宽 [重复]

Question

我在让带有overflow-x 的flex 容器的子级占据其内容的整个宽度时遇到了一些问题。

我们的目标是让内容项使用“flex: 1 0 216px”，当它们无法全部显示在屏幕上时，会出现滚动条，以便用户滚动查看其余内容。但是正如您在下面的 sn-p 中看到的那样，“.row” div 出于某种原因没有占据其父级“.container”的全部宽度，导致背景颜色和边框无法到达内容的边缘.我已将容器的背景设为灰色以强调问题。

这是代码的简化版本。谢谢！

.container {
  height: 100%;
  background-color: lightgray;
  overflow-x: auto;
}
.row {
  background: lightyellow;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid gray;
  display: flex;
  align-items: center;
  flex-basis: 100%;
  width: 100%;
}

.content {
  flex: 1 0 216px;
}

<div class="container">
    <div class="row">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
    </div>
    <div class="row">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
    </div>
    <div class="row">
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
      <div class="content">Content</div>
    </div>
</div>

Answer 1

在 flex 和 overflow: auto 之间肯定有一些问题，我只是没有深入探讨。如果它只是实现 .row 元素的全宽，而不是width: 100%；你可以设置min-width: calc(4 * 216px);，（因为你已经在.content上设置了flex-shrink: 0和flex-basis: 216px;，我认为.content永远不会小于那个......）