Make children of flex div have same width (on per-column basis)
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hi! I have a flex div (.parent) with child divs (you guessed it, .child) that wrap after every 5 columns. My problem is that I can't seem to get the children to have a consistent width same height without ruining my "grid". When I try designating a specific width for .child, etc. the heights look terrible because not each row has the same lengths of content.

An acceptable solution will be a working JSFiddle (or similar) with the height of the inner div(s) widths even, on a column-per-row basis, to avoid vertical spacing being uneven.

Example of code without set heights: https://jsfiddle.net/t2yzfkm9/

For demonstration, a similar fiddle (aesthetically similar to what I'm after, anyway): https://jsfiddle.net/uozxranj/

Thanks and please let me know if you have any questions.

P.S. Willing to tip for extras.

awarded to Zhopon
Tags
css
html
flex

Crowdsource coding tasks.

1 Solution

Winning solution

Hi Sharper,

You can make .child & all its child elements to use 100% of the width.

Do let me know if you face any issue.

Wow, simple as that! Cheers!
sharper 3 months ago