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

Question

我有一个 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>

Answer 1

将margin-bottom 更改为padding-bottom