Flexbox last child margin collapsing in Firefox

Question

I have a flexbox container with a fixed height and overflow-y set to scroll. Inside the container I have children with a value of margin-bottom: 2rem.

In Firefox the margin-bottom of the last child is ignored and I can't figure out why? It appears to have something to do with overflow. Chrome & Safari work as expected.

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>

https://stackoverflow.com/questions/44389126/why-does-firefox-ignores-bottom-margin-of-flex-item — Roberto Zvjerković, Mar 26 '19 at 10:46
https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout — kukkuz, Mar 26 '19 at 16:26
@kukkuz "The overflow property applies only to content. It doesn't apply to padding or margins." ... but it works properly when I use padding instead of margin? — Alex Lacayo, Mar 27 '19 at 00:51
see as I said, it is the implementation difference between browsers and we may have to live with it... I linked [this](https://stackoverflow.com/questions/38993170/last-margin-padding-collapsing-in-flexbox-grid-layout) because it shows a similar behavior in the *row* direction :) — kukkuz, Mar 27 '19 at 00:54

score 0 · Answer 1 · answered Mar 26 '19 at 10:48

0

Change margin-bottom to padding-bottom

answered Mar 26 '19 at 10:48

Joël-Etienne

386
1
12

2

Yes, I know but I'm trying to understand what's happening. – Alex Lacayo Mar 26 '19 at 10:49
The margin gets outside of the box that's why – Joël-Etienne Mar 26 '19 at 10:51
1

Right, but why is it going outside of the parent? Without overflow the margin is there. With overflow the margin is outside of the parent container. – Alex Lacayo Mar 26 '19 at 10:52
You can check this question: https://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element And some doc here: https://www.w3.org/TR/CSS2/box.html#collapsing-margins – Joël-Etienne Mar 26 '19 at 10:55
@AlexLacayo implementation difference between both the browsers I guess - *padding* can be used... – kukkuz Mar 26 '19 at 12:08

Flexbox last child margin collapsing in Firefox

1 Answers1