Flexbox最后一个子边距在Firefox中折叠

Posted 2023-03-05

【中文标题】Flexbox最后一个子边距在Firefox中折叠

【英文标题】：Flexbox last child margin collapsing in Firefox

【发布时间】：2019-08-16 17:10:48

【问题描述】：

我有一个 flexbox 容器，它的高度固定，溢出-y 设置为滚动。在容器内，我有一个值为 margin-bottom: 2rem 的孩子。

在 Firefox 中，最后一个孩子的 margin-bottom 被忽略了，我不知道为什么？它似乎与溢出有关。 Chrome 和 Safari 正常工作。

JSFIDDLE：https://jsfiddle.net/y7sn0rgb/1/

CSS

    .container 
        display: flex;
        flex-direction: column;
        width: 400px;
        height: 600px;
        background: grey;
        overflow-y: scroll;
    

    .comment 
        margin-bottom: 2rem;
    

html

  <div class="container">
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
        <div class="comment">
            The problem with Potential Problem #1 is that it appears to fall apart outside of a flex or grid formatting context. For example, in a standard block layout, the last margin doesn't appear to collapse. So maybe overflow is permitted to cover margins / paddings, regardless of what it says in the spec.
        </div>
  </div>

【问题讨论】：

***.com/questions/44389126/…

***.com/questions/38993170/…

@kukkuz “溢出属性仅适用于内容。它不适用于填充或边距。” ...但是当我使用填充而不是边距时它可以正常工作？

正如我所说，这是浏览器之间的实现差异，我们可能不得不忍受它......我链接了this，因为它在行中显示了类似的行为 i> 方向 :)

【参考方案1】：

将margin-bottom 更改为padding-bottom

【讨论】：

是的，我知道，但我正试图了解发生了什么。

边距超出了框框，这就是原因

是的，但是为什么它会超出父级？没有溢出，边距就在那里。溢出时，边距在父容器之外。

你可以检查这个问题：***.com/questions/13573653/… 和一些文档在这里：w3.org/TR/CSS2/box.html#collapsing-margins

@AlexLacayo 我猜这两种浏览器之间的实现差异 - padding 可以使用...