5

I have a grid in flexbox, like so:

flexbox grid

They're all positioned using flexbox, and then the panels themselves (the coloured bits) have margin: 5px.

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

Because the top right section has two elements, there's more margin there, so it's pushing down slightly—I don't want this to happen!

I guess the two possible fixes are either to make the margins not do that, or make the components five pixels smaller instead of five pixels larger like they are right now - but I don't know how to do either of those things.

How can I make adding more elements not change the size of the parent?

Asons
  • 84,923
  • 12
  • 110
  • 165
callumacrae
  • 8,185
  • 8
  • 32
  • 49
  • You need to use a horizontal layout instead of a vertical, as it will make row's equal height. If to keep vertical, you need to give each block a height – Asons Jun 29 '17 at 10:26
  • That only works in the simple case I posted - in more complicated cases (such as a vertical layout inside a horizontal layout, instead of the vertical layout), will still be an issue. – callumacrae Jun 29 '17 at 10:28
  • @callumacrae Why not using grid layout for this? I think in current case it's more appropriate. – Vadim Ovchinnikov Jun 29 '17 at 10:54
  • @VadimOvchinnikov it's entirely inappropriate to use any feature that only has 69.3% browser support on a production website. http://caniuse.com/#feat=css-grid – callumacrae Jun 29 '17 at 10:56

1 Answers1

3

The main problem is that you are sizing the elements using flex-grow. flex-grow is not the right property as it, together with flex-shrink is used to distribute the space left (or if to little).

You should use flex-basis, because as soon as you start fill these empty boxes with content, and their content will differ in size, they will misalign even more.

Here is an updated version of yours, where I changed to style="flex-basis: calc(50% - 10px);" (the 10px is to make up for your margins).

And here is a version of yours, with the same text I used in mine

Asons
  • 84,923
  • 12
  • 110
  • 165