时间戳

首页 > 解决方案 > 带有溢出的 Flex 容器忽略最后一个子边距

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

问题描述

我正在尝试在 flex 容器上添加宽度约束和水平溢出。

孩子有边距，但我不知道为什么，最后一个边距不在容器中；我可以通过 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>

标签： cssflexboxmargin

解决方案

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

使用inline-flex 的工作示例（我删除了 scroll-snap，因为这里没有必要）：

.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>

推荐阅读