带有溢出的 Flex 容器忽略最后一个子边距答案

【问题标题】：Flex container with overflow ignore last child margin带有溢出的 Flex 容器忽略最后一个子边距
【发布时间】：2021-07-12 17:14:59
【问题描述】：

我正在尝试在弹性容器上添加宽度约束，以及水平溢出。

孩子有边距，但我不知道为什么，最后一个边距不在容器中；我可以通过 Chrome 调试看到它，但容器只是忽略它......

有没有办法强制弹性容器考虑这个边距？

我尝试使用flex-wrap、box-sizing，即使使用padding，结果也是一样的......

谢谢！

这是一个可以运行的简单演示；如果滚动到最后，右边就没有空间了。

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    .container {
      width: 300px;
      border: 1px #000 solid;
      display: flex;
      overflow: auto;
      scroll-snap-type: x mandatory;
    }
    .child {
      min-width: 200px;
      width: 200px;
      border: 1px #f00 solid;
      margin: 20px;
      scroll-snap-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="child"><p>blablabla</p><p>blablabla</p></div>
    <div class="child"><p>blablabla</p></div>
    <div class="child"><p>blablabla</p></div>
    <div class="child"><p>blablabla</p></div>
  </div>
</body>
</html>

【问题讨论】：

标签： css flexbox margin

【解决方案1】：

您可以通过将:after 添加到 .container 来处理此问题

.container {
  width: 300px;
  border: 1px #000 solid;
  display: flex;
  overflow: auto;
  scroll-snap-type: x mandatory;
}
.container::after {
  content: '';
  width: 20px;
  flex-shrink: 0
}
.child {
  min-width: 200px;
  width: 200px;
  border: 1px #f00 solid;
  margin: 20px;
  scroll-snap-align: center;
}

<!doctype html>
<html lang="fr">
<body>
  <div class="container">
    <div class="child"><p>blablabla</p><p>blablabla</p></div>
    <div class="child"><p>blablabla</p></div>
    <div class="child"><p>blablabla</p></div>
    <div class="child"><p>blablabla</p></div>
  </div>
</body>
</html>

【讨论】：

【解决方案2】：

忽略边距的是溢出，因为它仅适用于内容。因此，内部容器就是您所做的解决方案。

inline-flex 的工作示例（我删除了滚动快照，因为这里没有必要）：

.container {
  width: 300px;
  border: 1px #000 solid;
  overflow: scroll;
}
.inner {
  display: inline-flex;
}
.child {
  min-width: 200px;
  width: 200px;
  border: 1px #f00 solid;
  margin: 20px;
}

<div class="container">
    <div class="inner">
        <div class="child"><p>blablabla</p><p>blablabla</p></div>
        <div class="child"><p>blablabla</p></div>
        <div class="child"><p>blablabla</p></div>
        <div class="child"><p>blablabla</p></div>
    </div>
</div>

【讨论】：

【解决方案3】：

我发现它适用于.container 和.child 之间的中间容器，具有display: flex 属性。

至少它有效，但我不知道为什么我必须这样做：/

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <style type="text/css">
    .container {
      width: 300px;
      border: 1px #000 solid;
      display: flex;
      overflow: auto;
      scroll-snap-type: x mandatory;
    }
    .intermediate {
      display: flex;
    }
    .child {
      min-width: 200px;
      width: 200px;
      border: 1px #f00 solid;
      margin: 20px;
      scroll-snap-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="intermediate">
      <div class="child"><p>blablabla</p><p>blablabla</p></div>
      <div class="child"><p>blablabla</p></div>
      <div class="child"><p>blablabla</p></div>
      <div class="child"><p>blablabla</p></div>
     </div>
  </div>
</body>
</html>

【讨论】：