Question

我有一个具有固定高度的flexbox容器，并且将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

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

1 个答案: