Search code examples
cssreactjsflexboxtailwind-css

Tailwind "w-screen" breaking other divs

I have the following screen atm: enter image description here

And Im trying to make a div that fills the whole blank space, but when i try using "w-screen" or any high value at the width it breaks into the left div, like this: enter image description here

Any ideas on how to fix it? Heres the code with the "rose" background breaking the left div:

<div>
    <Header />
    <div className="flex">
        <Menu />
            <div className="flex-col w-96 h-screen ml-20 bg-verdeMenuFin">
                <div className="ml-10 mt-10 w-80 h-28 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
                <div className="ml-10 mt-14 w-80 h-32 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
                <div className="ml-10 mt-14 w-80 h-96 bg-verdeIdv rounded-2xl shadow-sombraTres">

                </div>
            </div>
        <div className="flex bg-rose-900 w-screen h-screen">

        </div>
    </div>

</div>
Solution

  • Since the <div> you're applying the w-screen class to is the child of a <div> that's got a display value of flex, you could use the grow class on the <div> with the rose background to allow it to fill the remainder of the available space.

    Here are the TailwindCSS docs for the grow class.

    <div>
  <Header />
  <div className="flex">
    <Menu />
    <div className="flex-col w-96 h-screen ml-20 bg-verdeMenuFin">
      <div className="ml-10 mt-10 w-80 h-28 bg-verdeIdv rounded-2xl shadow-sombraTres">

      </div>
      <div className="ml-10 mt-14 w-80 h-32 bg-verdeIdv rounded-2xl shadow-sombraTres">

      </div>
      <div className="ml-10 mt-14 w-80 h-96 bg-verdeIdv rounded-2xl shadow-sombraTres">

      </div>
    </div>
    <!-- grow class added to this div and w-screen class removed -->
    <div className="flex grow bg-rose-900 h-screen">

    </div>
  </div>
</div>