La "pantalla w" de Tailwind rompe otras divisiones

Resuelto Lucca asked hace 9 meses • 1 respuestas

Tengo el siguiente cajero automático con pantalla: ingrese la descripción de la imagen aquí

Y estoy tratando de crear un div que llene todo el espacio en blanco, pero cuando intento usar "w-screen" o cualquier valor alto en el ancho, se divide en el div izquierdo, así: ingrese la descripción de la imagen aquí

¿Alguna idea de cómo arreglarlo? Aquí está el código con el fondo "rosa" rompiendo el div izquierdo:

<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>
Lucca avatar Feb 17 '24 03:02 Lucca
Aceptado

Dado que <div>la clase a la que está aplicando w-screenes hija de a <div>que tiene un valor de visualización de flex, puede usar la growclase con <div>el fondo rosa para permitirle llenar el resto del espacio disponible.

Aquí están los documentos de TailwindCSS para la clase de crecimiento .

<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>
Expandir fragmento

Tom avatar Feb 16 '2024 20:02 Tom