Prevenir una explosión de la red

Digamos que tienes un diseño de cuadrícula CSS muy simple con una columna fija en 300pxy otra que ocupa el resto del espacio en 1fr.

.grid {  display: grid;  grid-template-columns: 1fr 300px;}

Eso es algo robusto. Esa 1frcolumna ocupará el espacio restante que deja la 300pxcolumna fija. Es cierto que el autovalor haría lo mismo, pero autono es tan sólido ya que su tamaño se basa en el contenido que contiene. Por lo tanto, si tenía muy poco contenido, es posible que su columna no ocupe todo el espacio que desea. Pero aunque 1fres un poco más robusto, ¡no te protegerá del todo de contenido demasiado grande!

Aquí está la cuadrícula que se comporta bien con algún contenido de texto:

Ahora, observe cómo esa columna de la derecha desaparece de la página cuando colocamos una imagen gigantesca en esa columna:

Este es fácil de solucionar, y es posible que nunca te suceda, porque este fragmento es muy común en nuestras hojas de estilo:

img {  max-width: 100%;}

Pero algunos elementos no son tan amigables. Tome la famosa preetiqueta. Digamos que lanzamos uno de los de nuestra 1frcolumna con una larga cadena de texto. Volvemos a la ruina:

Esta vez, las cosas no son tan fáciles de solucionar. Incluso intentar limitar el ancho y ocultar el desbordamiento preno servirá de nada:

pre {  max-width: 100%;  overflow: hidden;}

La verdadera solución no es tan difícil: sólo necesitamos comprender qué está sucediendo. No puedo prometer que esté explicando esto con 100% de precisión, pero según tengo entendido, el ancho mínimo de una columna de la cuadrícula esauto . (Por cierto, lo mismo ocurre con los elementos flexibles).

Y como autose basa completamente en el contenido, podemos decir que tiene un tamaño “indefinido”, sus dimensiones son flexibles. Si le pusiéramos un ancho explícito a la columna, como 50%o 400px, entonces diríamos que tiene un tamaño “definitivo”.

Para aplicar nuestra solución, debemos asegurarnos de que la columna tenga un ancho mínimo definido en lugar de auto.

Entonces, podemos arreglarlo así:

.grid {  /* auto minimum width, causing problem */  grid-template-columns: 1fr 300px;  /* fix: minimum width of 0 */  grid-template-columns: minmax(0, 1fr) 300px;}

O ponemos un valor real min-widthen el elemento que ocupa esa columna de la cuadrícula. En nuestra demostración simple, el mainelemento se coloca automáticamente en esa primera columna, ya que es el primer hijo de la cuadrícula.

Eso nos da esto:

main {  min-width: 0;}

Creo que es un poco más sólido hacer esto en el nivel de definición de la red. De todos modos, ¡funciona! ¿Ves cómo la preetiqueta ahora respeta el ancho de la columna y puede desbordarse como se esperaba?

Lindo.