У меня есть контейнер 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>