Flexbox 最后一个子边距在 Firefox 中崩溃

Question

我有一个弹性框容器，其固定高度和溢出-y设置为滚动。在容器内，我有孩子，边距底部的值：2rem。

在 Firefox 中，最后一个孩子的边距底部被忽略了，我不知道为什么？它似乎与溢出有关。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