我有一个固定高度和 overflow-y 设置为滚动的 flexbox 容器。在容器内，我有值为 margin-bottom: 2rem 的 child 。
在 Firefox 中，最后一个 child 的边距底部被忽略了，我不明白为什么？它似乎与溢出有关。 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>
最佳答案
将 margin-bottom 更改为 padding-bottom
关于html - Flexbox 的最后一个子边距在 Firefox 中崩溃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55355106/