Flexbox fields in grid

Question

I have a grid in flexbox, for example:

They are all located using flexbox, and then the panels themselves (colored bits) have a margin: 5px .

codepen here: https://codepen.io/callumacrae/pen/bRoZdp

Since the upper right section has two elements, there is more field there, so it is slightly squeezed out - I do not want this to happen!

I think there are two possible corrections - either to make the margin wrong, or to make the components five pixels smaller, and not five pixels more, as it is now, but I don’t know how to do any of these things.

How can I add more elements without resizing the parent?

Answer 1

The main problem is that you define elements using flex-grow . flex-grow not a valid property, as it is used with flex-shrink to distribute space to the left (or, if not enough).

You should use flex-basis , because as soon as you start filling these empty fields with content, and their contents will vary in size, they will move even more.

Here is your updated version where I changed to style="flex-basis: calc(50% - 10px);" (10px should compensate your fields).

• Codepen with flex-basis

And here is your version, with the same text that I used in my

• Codepen with flex-grow