Tailwind CSS flex item overflows outside of parent

user_10651233 0
Viewed 739

I have a flexbox with 3 children items that looks something like this:

<section className="px-5 flex flex-col md:flex-row md:space-x-10 justify-around">
        <div className="flex flex-col py-3 md:flex-grow"><input ... /></>
        <div className="flex flex-col py-3 md:flex-grow"><input ... /></>
        <div className="flex flex-col py-3 md:flex-grow"><input ... /></>
</section>

This works fine in full screen, however flex items start to break out of parent after shrinking the window width (near 1000px).

How can I make it so the items stay inside their parent?

Fullscreen

After shrinking window width

What I would like to achieve

flexbox tailwind-css css
2 Answers

If you use flexbox, you can use flex wrap property to solve your proble.,

But i try to get the same result with grid

<div class="container py-10">
  <section class="grid grid-cols-3 gap-4 p-5 border border-gray-400 rounded-lg">
    <div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
    <div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
    <div class="w-full h-20 bg-orange-200 border border-orange-400 rounded-md"></div>
  </section>
</div>

This is better i think :)

user_184678450
user_116538470
Related