Kevin Powell - Community•2y ago

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•2y ago

please someone help me

Unknown User•2y ago

Message Not Public

vince•2y ago

flex: 1 on your child elements

13eck•2y 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).

Gaming

Programming

give equal width to elements in container div