CODEWITHSUNDEEP
cssflexbox
joelm1988
joelm1988

Reputation: 31

Controlling Ratios of Flex Children Inside Parent with No Fixed Height

I'm looking to achieve a similar result to the one that is explained here. I've included the exact snippet below:

flex: 1 1 0;

Here we are saying that the size of the item for the purposes of our space distribution calculation is 0 — all the space is up for grabs and as all of the items have the same flex-grow factor, they each get an equal amount of space distributed. The end result is three equal width, flexible items.

I will be working with a column of vertical children as aposed to a row of horizontal children, but the working shouldn't differ.

My issue is that in the above example, an explicit width (in my case, height) has been set, which I cannot do. I am looking to create four equally sized quarters regardless of the content each one contains.

In a nutshell – is there a way to have equal height child divs, with varying content, inside a parent with no explicit height?

Any help greatly appreciated!

Upvotes: 0

Views: 257

Answers (1)

joelm1988
joelm1988

Reputation: 31

After a lot of testing, I realised that using flexbox for this wasn't achievable (easily at least). Using CSS Grid however is incredibly straight forward. For anyone interested in the solution, it is as easy as giving each 'module' a value of 1fr.

Upvotes: 1

Related Questions