How can I make margin behave the same in a flex container and out of it?

Question

I got a problem. when using margin inside a flexbox it have double the size of what it should be (like it doesnt collide or so)

This is where I have the problem: jsfiddle This is the code:

<div style="height: 350px;">
<div style="height: 182px; display: flex; justify-content: flex-end; flex-direction: column;">
<div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div>
<div style="margin: 5px; height: 94.5px; width: 80px; background-color: red;"></div>
<div style="margin: 5px; height: 87.5px; width: 80px; background-color: brown;"></div>
</div>
<div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
<div style="margin: 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
</div>

What is the reason for this? And how can I make the margin behave the same on both flex container and out of it?

short answer: you cannot. You are facing margin collapsing and this *feature* is disabled in a flexbox context. Either disable margin collpasing outside (use inline-bock for example) or change the margin to they are the same — Temani Afif, Jun 13 '19 at 08:30

score 3 · Answer 1 · answered Jun 13 '19 at 08:38

Why does it behave this way?
Margin collapsing works in block formatting context and not in flex formatting context.
Here is @Michael_B's answer explaining the reason behind this.

How do I get collapsible margin?
One way is to wrap the 3 div blocks with a div. There could be a better way, but you can try and share here.

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

It is not doubling the size inside the flexbox. In flexbox, the margin is considered of upper div as well as lower div

i.e. total margin = upper div margin + lower div margin

but outside of the flexbox, the margin is considered as the

max (upper div margin, lower div margin ).

This phenomenon is called Margin Collapse.

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins. This does not happen on the left and right margins! Only the top and bottom margins!

Thanks to your answer I stopped trying to fix what have and change it. posted an solution I came to. — Ido Cohen, Jun 13 '19 at 09:11

score 0 · Answer 3 · answered Jun 13 '19 at 09:08

Thanks for the answers! I learned a lot!

The simple solution I came to is using: margin: 0px 5px 5px 5px;

I don't know why I didn't came up with this earlier.

You can see it works now here

<div style="height: 350px;">
<div style="height: 182px; display: flex; justify-content: flex-end; flex-direction: column;">
<div style="margin: 0px 5px 5px 5px; height: 94.5px; width: 80px; background-color: red; display: inline-block;"></div>
<div style="margin: 0px 5px 5px 5px; height: 94.5px; width: 80px; background-color: red; display: inline-block;"></div>
<div style="margin: 0px 5px 5px 5px; height: 87.5px; width: 80px; background-color: brown; display: inline-block;"></div>
</div>
<div style="margin: 0px 5px 5px 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 0px 5px 5px 5px; height: 31.5px; width: 80px; background-color: green;"></div>
<div style="margin: 0px 5px 5px 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
<div style="margin: 0px 5px 5px 5px; height: 52.5px; width: 80px; background-color: yellow;"></div>
</div>

How can I make margin behave the same in a flex container and out of it?

3 Answers3