flex component | weird padding behavior
Hey, i'm using a flex utility for a responsive two column layout. The layout should switch from single column to double column when the container reaches 45rem in width. When the container has padding on it though, it switches over a little later. I don't really understand the reasoning for this other than it's possibly adding the padding value onto the 45rem, but even if that's the case, if the container that doesn't have padding has reached 45rem and switched, then the padding shouldn't make a difference? Thanks in advance.
https://codepen.io/deerCabin/pen/VwJOqYW
4 Replies
The padding does make a difference.
With flex the browser has to divide the space up amongst the children and it has to allow for padding if it is defined.
Bear in mind that the 45rem is not the width of the parent but the width that you are defining for the children.
If you have padding on the container, it will need to be wider before the children reach the 45rem.
Oh I see now, thank you. so essentially adding padding takes the padding value away from 45rem meaning it has to be wider to activate as you say?
Note - padding & gaps
Alright cool, noted. Thank you.