CSS y Tailwind

min-w-0 / min-h-0 en contenedores grid y flex

Por defecto, los items de un grid o flex container tienen min-width: auto (o min-height: auto en eje vertical), NO 0. Esto significa que un item nunca se va a encoger más chico que su contenido intrínseco, sin importar el tamaño que le des al contenedor (w-full, max-w-7xl, etc). Si el contenido interno es más ancho/alto que el espacio disponible, el contenedor se ESTIRA para acomodarlo, empujando el layout entero en vez de generar scroll contenido.

Por eso: cualquier contenedor grid/flex que envuelva contenido con overflow (tablas anchas, código sin wrap, contenido con ancho/alto fijo, etc) es candidato a necesitar min-w-0 (overflow horizontal) o min-h-0 (overflow vertical). Al poner min-width: 0 le decimos explícitamente al navegador "sí, puedes encoger esto más chico que su contenido", permitiendo que el hijo directo con overflow-x-auto / overflow-y-auto maneje su propio scroll.

Casos de uso típicos:

• Tablas anchas con muchas columnas dentro de un <main> con grid
• Bloques de código (<pre>) sin word-wrap dentro de un flex item
• Columnas de chat/sidebar con scroll interno (min-h-0 en eje vertical)
• Cualquier contenido con width/max-width fijo mayor al del padre

<!-- grid -->
<div class="grid min-h-svh grid-rows-[auto_1fr_auto]">
  <Navbar />

  <!-- min-w-0 -->
  <main class="lg:border-x w-full max-w-7xl min-w-0 mx-auto p-4">
    {@render children()}
  </main>

  <footer class="border-t">
    <div class="lg:border-x w-full max-w-7xl mx-auto p-5"></div>
  </footer>
</div>