-1

I dont seem to understand how the flex-grow works.

See this fiddle: https://jsfiddle.net/k89twr8e/

The flex-grow is not right and i cant find the appropriate values so the first 2 green box borders align with the one to it's right... The first 2 is ok but the rest are now.

It is something to do with the correct flex-grow values for the .wrap, .child and .separator

Would appreciate any help.

Thanks

user2707590
  • 1,066
  • 1
  • 14
  • 28
  • Please clarify your specific problem or add additional details to highlight exactly what you need. As it's currently written, it’s hard to tell exactly what you're asking. Flex-grow is not the same as height/width. - http://stackoverflow.com/questions/34733955/what-are-the-differences-between-flex-grow-and-width – Paulie_D Jul 01 '16 at 21:17

1 Answers1

0

Each column is completely unaware of the size/position of the content in other columns, so I don't think this is going to work like you want it to.

Flex-grow defines the ability to grow if necessary, to distribute the space in a particular row/column, and then those numbers just define a ratio relationship with the other elements in that particular column. (example: an element with flex-grow:4 will be 4x the size of an element with flex-grow:1)

That "if necessary" part comes into play with your first column. Since initially .container doesn't have a defined height, there's no extra space to be distributed. So each element is slotted into the column at their default height, which in this case would be the line-height of the li

Below is a visual representation that hopefully helps clarify how the sizes of things are being determined.

enter image description here

Brice
  • 940
  • 9
  • 22