KPC
Kevin Powell - Community•3y ago
Aditya Kirad

give equal width to elements in container div

<div className="flex w-[60%] h-[60%] mt-[5%] rounded-md border-2 border-[#000]">
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
</div>
<div className="flex w-[60%] h-[60%] mt-[5%] rounded-md border-2 border-[#000]">
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
  <div className="flex flex-col bg-white h-full"></div>
</div>
width of container div is 70% and I want to give all the div in container div equal width I'm using tailwind css
4 Replies
Aditya Kirad
Aditya KiradOP•3y ago
please someone help me
Unknown User
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
vince
vince•3y ago
flex: 1 on your child elements
13eck
13eck•3y ago
Vince is correct, you need to set the flex-grow property to 1 (if you use the flex shorthand with only one unitless value it's the flex-grow). By default flex children don't grow (flex-grow is 0) so if you want it them to take up more room than their content would dictate you need to tell it to do so. How you do that with tailwind I have no idea, so you'll have to read their docs to figure it out. Also, half.cto is incorrect, you should never set explicit widths like that (especially "magic numbers") and you should instead use flexbox (as it's the best tool for this job).

Did you find this page helpful?