CSS 右边距在溢出滚动的 div 中不起作用

Question

我正在尝试制作两个 div，一个在另一个里面。内层div大于外层，外层有overflow:scroll，内层有margin:25px。所以我这样做：

#outer {
    width: 200px;
    height: 100px;
    overflow: scroll;
}
#inner {
    width: 400px;
    height: 200px;
    margin: 25px;
}

...

<div id="outer">
    <div id="inner">

    </div>
</div>

内部 div 没有像预期的那样一直有 25px 的边距，而是在三边有 25px 的边距，但右侧没有。在我看来，这非常违反直觉。

如果我添加一个宽度足够大的中间 div 以包含内部 div + 50px，我们可以使它看起来正确，但这似乎是一个 hacky 解决方法。

在 JSFiddle 上查看我的示例：http://jsfiddle.net/d3Nhu/16/

这在每个主要浏览器中都以相同的方式发生。这种行为有什么好的理由吗？根据 CSS 规范，这是正确的行为吗？

注意：正如您在此示例中所期望的那样，如果您使用 overflow:auto 而不是 overflow:scroll，则没有区别。

编辑：请注意，我不是寻找解决此问题的方法。 （我已经找到了。）我正在寻找有关此行为的原因的任何见解，特别是如果它记录在 CSS specification 任何地方。

Answer 1

TL;DR:

边距用于将元素从包装器中移入，而不是向外扩展包装器。

长解释：

除了在文档中的任意位置指定水平margin 之外，此行为与指定width 一致。为了分解它，请考虑以下 sn-p，其中我指定了一个没有 overflow 属性的包装器，而 margin 不扩展包装器元素。

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}

<div class="outer">
    <div class="inner">
        
    </div>
</div>

如您所见，margin 并没有导致包装器的大小扩大，元素只是继续溢出。此行为记录在 CSS 2.1 规范中的可视格式化模型详细信息中。

摘自“Visual formatting model details”的“Block-level, non-replaced elements in normal flow”部分：

在其他属性的使用值中必须保持以下约束：

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = 包含的宽度阻止

[...]

如果上述所有值都具有除“auto”之外的计算值，则这些值被称为“过度约束”，并且使用的值之一必须与其计算值不同。如果包含块的“direction”属性值为“ltr”，则忽略“margin-right”的指定值并计算该值以使等式成立。如果 'direction' 的值是 'rtl'，这会发生在 'margin-left' 上。

这段摘录相当密集，所以简单来说，让我们忽略border 和padding 的宽度，它们都是0，剩下width、margin-left 和margin-right。

现在，由于您有一个固定的 width 和 margin-left 和 margin-right 的值，因此这些值“过度约束”。现在在我们的例子中，由于默认方向是ltr，所以margin-right被强制补偿。

要查看方向的效果，让我们尝试将dir="rtl" 属性添加到包装元素。

body {
    padding: 20px;
}
.outer {
    width: 400px;
    border: 1px solid black;
}
.inner {
    width: 400px;
    height: 40px;
    margin: 0 20px;
    background: grey;
}

<div class="outer" dir="rtl">
    <div class="inner">
        
    </div>
</div>

现在元素向左溢出。让我们看看这个dir="rtl" 属性是否对您的overflow: scroll 示例具有相同的效果。

#outer {
    border: 1px solid #00F;
    width: 200px;
    height: 100px;
    overflow: scroll;
}
#inner {
    border: 1px solid #F0F;
    margin: 25px;
    width: 400px;
    height: 200px;
}

<div id="outer" dir="rtl">
    <div id="inner">
    
    </div>
</div>

是的，确实如此。现在左边的边距不见了，而不是右边。

但为什么overflow: scroll 不包括边距？

主要是因为规范没有说应该。让我们看一下 overflow 属性的 CSS 2 规范。

摘自“Visual effects”的“Overflow and clipping”部分：

每当发生溢出时，'overflow' 属性指定一个框是否被剪裁到其填充边缘，如果是，是否提供滚动机制来访问任何被剪裁的内容。

看看它是如何具体说“剪辑的内容”的。关于“内容”的解释，请参考 CSS 2 规范中的下图。

来自“Box model”的“Box dimensions”部分的图形：

正如我们所见，margin 与 content 是分开的。然而，此时值得注意的是，填充和边框包含在滚动区域中，所以当规范说“内容”时，它可能指的是边框框，或者至少，它似乎是这样解释的。

为什么display: inline-block 有效？

基本上，inline-block 元素的边距表现不同，因为它们是内容级别而不是块级别，并且它们没有“过度约束”的概念。

Answer 2

将display:inline-block; 添加到#inner div

看到这个fiddle

Answer 3

所以这里的答案实际上并不能解决问题！ （虽然对它不起作用的原因非常详细）

我需要一个解决方案。这是我的未来读者。使用 display:flex; 与伪 ::after 元素的组合来伪造 div 的存在以提供所需的边距。

.wrapper {
  display: flex;
  width: 400px;
  height: 100%;
  padding: 40px;
  background: lightGrey;
}

.lists_container {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  overflow: auto;
  position: relative;
  background: grey;
  padding: 40px;
  margin: 40px;
  width: 100%;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 250px;
  max-width: 500px;
  height: 100px;
  margin: 50px 0;
  padding: 20px;
  background: orange;
  margin-right: 30px;
}

.card.last::after {
  content: '';
  position: absolute;
  right: -100px;
  width: 40px;
  height: 100%;
  background: red;
}

<div class="wrapper">

  <div class="lists_container">

    <div class="card">
    </div>

    <div class="card">
    </div>

    <div class="card last">
    </div>

  </div>

</div>