CODEWITHSUNDEEP
cssflexboxtailwind-css
UXCODA
UXCODA

Reputation: 1246

How to make flexbox children fill width of parent from parent class

I have a div with 5 child divs. There is no content, it's just there to visually display a percentage. I have set a width and height on the parent and I want to find the easiest way to make the children equally fill that width. I can do this by adding flex-grow to each child but ideally I'd love to be able to control that from the parent.

NB: Code is using tailwindcss

<div class="flex w-64 h-2">
    <div class="flex-grow mr-1 rounded-l-lg bg-blue-dark"></div>
    <div class="flex-grow mr-1 bg-blue-dark"></div>
    <div class="flex-grow mr-1 bg-blue-dark"></div>
    <div class="flex-grow mr-1 bg-blue-dark"></div>
    <div class="flex-grow rounded-r-lg bg-gray-lighter"></div>
</div>

Upvotes: 1

Views: 2974

Answers (1)

chojnicki
chojnicki

Reputation: 3623

You have "flexbox" in title but you did not mentioned in question that you actually you are forced to use flexboxes, just need to achieve equal divs. So the best approach will be using grid instead of flex, because it is just designed for that.

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>

<div class="grid grid-flow-col w-64 h-2">
    <div class="bg-blue-500"></div>
    <div class="bg-red-500"></div>
    <div class="bg-green-500"></div>
    <div class="bg-orange-500"></div>
    <div class="bg-gray-500"></div>
</div>

Upvotes: 2

Related Questions