¿Cómo establecer el ancho máximo de una columna en CSS Grid Layout?

Question 1

Lo que quiero lograr:

Usando Diseño de cuadrícula CSSpara tener una página con una columna derecha cuyo tamaño se deriva de su contenido, pero solo hasta el 20% del ancho de la ventana.

Cómo pensé que funcionaría:

div {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 20%);
}

<div id="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

Se ve bien, pero luego cuando elimino el contenido del segundo divla columna de la izquierda no colapsa:

div {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr minmax(auto, 20%);
}

<div id="container">
  <div>
    some content
  </div>
  <div></div>
</div>

Mi pregunta:

Tenía la impresión de que desde minmax()

(…) define un rango de tamaño mayor o igual al mínimo y menor o igual al máximo.

significaría que en mi caso el ancho se establece desde auto (= 0 cuando el div está vacío) a 20%. Sin embargo, se mantiene en un 20%. ¿Por que es esto entonces?

Question 2

“La función de ajuste de contenido acepta un parámetro, el valor máximo. Una columna/fila de cuadrícula con esta propiedad establecida seguirá ocupando el mínimo espacio necesario, de acuerdo con su contenido, pero no más que el valor máximo”.

Ver este artículo: ¡Conviértete en un CSS Grid Ninja!

Puede resolver su caso sin dejar de utilizar máximos basados en porcentajes:

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr fit-content(20%);
}

.container div {
  overflow: hidden; /* this needs to be set so that width respects fit-content */
}

<div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

Question 3

has entendido mal minmax función. Primero intenta aplicar el valor máximo y cuando eso no es posible, aplica el mínimo.

Entonces, para arreglar su diseño, solo necesita calcular 20% del ancho de su contenedor, aplíquelo usando max-width propiedad para su elemento de cuadrícula, y use auto en tus grid-template-columns definición de propiedad para la segunda columna. Manifestación:

div {
  outline: 1px dotted gray;
}

.container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
}

.container > :nth-child(2) {
  max-width: 60px; /* 20% x 300px */
}

<div class="container">
  <div>
    some content
  </div>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus eu leo ac ultrices. Vivamus ornare, orci sed pretium sollicitudin
  </div>
</div>

<div class="container">
  <div>
    some content
  </div>
  <div></div>
</div>

Actualización: se utilizará una solución más flexible fit-content función de esta respuesta.

Question 4

Es posible que deba configurar el max-width en el propio contenedor y deje que su columna se establezca en auto.

div,
aside {
  border-style: solid;
}

#container {
  width: 300px;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr auto;
}

aside {
  max-width: 60px; /* 60px is 20% of 300px*/
  /* max-width:20%; 20% of window's */
  font-size: 0;
  transition: 0.25s;
}

#container:hover aside {
  font-size: 1em;
}

<div id="container">
  <div>
    Hover it to see aside grow till 20% average width
  </div>
  <aside>lets give a try to resize it from content</aside>
</div>

¿Ha sido útil esta solución?