¿Por qué los elementos flexibles no se reducen más allá del tamaño del contenido?

Tengo 4 columnas flexbox y todo funciona bien, pero cuando agrego algo de texto a una columna y lo configuro con un tamaño de fuente grande, la columna es más ancha de lo que debería debido a la propiedad flex.

Intenté usarlo word-break: break-wordy me ayudó, pero aún así cuando cambio el tamaño de la columna a un ancho muy pequeño, las letras del texto se dividen en varias líneas (una letra por línea) y, sin embargo, la columna no tiene un ancho menor que el tamaño de una letra .

Mire este video (al principio, la primera columna es la más pequeña, pero cuando cambié el tamaño de la ventana, es la columna más ancha. Solo quiero respetar la configuración flexible siempre; tamaños flexibles 1: 3: 4: 4)

Lo sé, establecer el tamaño de fuente y el relleno de columna en un tamaño más pequeño ayudará ... pero ¿hay alguna otra solución?

No puedo usar overflow-x: hidden.

JSFiddle

.container {
  display: flex;
  width: 100%
}
.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}
.col1 {
  flex: 1;
  background: orange;
  font-size: 80px
}
.col2 {
  flex: 3;
  background: yellow
}
.col3 {
  flex: 4;
  background: skyblue
}
.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

El tamaño mínimo automático de los elementos flexibles

Te encuentras con una configuración predeterminada de flexbox.

Un elemento flexible no puede ser más pequeño que el tamaño de su contenido a lo largo del eje principal.

Los valores predeterminados son ...

• min-width: auto
• min-height: auto

... para elementos flexibles en dirección de fila y dirección de columna, respectivamente.

Puede anular estos valores predeterminados configurando los elementos flexibles en:

• min-width: 0
• min-height: 0
• overflow: hidden(o cualquier otro valor, excepto visible)

Especificación Flexbox

4.5. Tamaño mínimo automático de elementos flexibles

Para proporcionar un tamaño mínimo predeterminado más razonable para los elementos flexibles, esta especificación introduce un nuevo autovalor como el valor inicial de las propiedades min-widthy min-heightdefinidas en CSS 2.1.

Con respecto al autovalor ...

En un elemento flexible cuyo overflowestá visibleen el eje principal, cuando se especifica en la propiedad de tamaño mínimo del eje principal del elemento flexible, especifica un tamaño mínimo automático . De lo contrario, calcula 0.

En otras palabras:

• Los valores predeterminados min-width: autoy se min-height: autoaplican solo cuando overflowes visible.
• Si el overflowvalor no es visible, el valor de la propiedad de tamaño mínimo es 0.
• Por tanto, overflow: hiddenpuede ser un sustituto de min-width: 0y min-height: 0.

y...

• El algoritmo de tamaño mínimo se aplica solo en el eje principal.
• Por ejemplo, un elemento flexible en un contenedor de dirección de fila no se obtiene min-height: autode forma predeterminada.
• Para obtener una explicación más detallada, consulte esta publicación:
  • renderizado de ancho mínimo de manera diferente en flex-direction: row y flex-direction: column

¿Ha aplicado min-width: 0 y el elemento aún no se encoge?

Contenedores flexibles anidados

Si está tratando con elementos flexibles en varios niveles de la estructura HTML, puede ser necesario anular los elementos predeterminados min-width: auto/ min-height: autoen niveles superiores.

Básicamente, un elemento flexible de nivel superior con min-width: autopuede evitar que se encojan los elementos anidados debajo con min-width: 0.

Ejemplos:

• El elemento flexible no se encoge más pequeño que su contenido [duplicado]
• Encajar al niño en el padre
• La propiedad css de espacio en blanco está creando problemas con flex [duplicado]

Notas de renderización del navegador

• Chrome frente a Firefox / Edge

  Desde al menos 2017, parece que Chrome está (1) volviendo a los valores predeterminados min-width: 0/ min-height: 0o (2) aplicando automáticamente los 0valores predeterminados en ciertas situaciones según un algoritmo misterioso. (Esto podría ser lo que ellos llaman una intervención ). Como resultado, muchas personas ven que su diseño (especialmente las barras de desplazamiento deseadas) funciona como se esperaba en Chrome, pero no en Firefox / Edge. Este problema se trata con más detalle aquí: discrepancia de contracción flexible entre Firefox y Chrome

• IE11

  Como se indica en la especificación, el autovalor de las propiedades min-widthy min-heightes "nuevo". Esto significa que algunos navegadores aún pueden representar un 0valor por defecto, porque implementaron diseño flexible antes de que se actualizara el valor y porque 0es el valor inicial para min-widthy min-heighten CSS 2.1 . ¿Por qué los elementos flexibles no se reducen más allá del tamaño del contenido?Otros navegadores se han actualizado al autovalor más reciente según se define en la especificación de flexbox .

Demo revisada

.container {
  display: flex;
}

.col {
  min-height: 200px;
  padding: 30px;
  word-break: break-word
}

.col1 {
  flex: 1;
  background: orange;
  font-size: 80px;
  min-width: 0;   /* NEW */
}

.col2 {
  flex: 3;
  background: yellow
}

.col3 {
  flex: 4;
  background: skyblue
}

.col4 {
  flex: 4;
  background: red
}

<div class="container">
  <div class="col col1">Lorem ipsum dolor</div>
  <div class="col col2">Lorem ipsum dolor</div>
  <div class="col col3">Lorem ipsum dolor</div>
  <div class="col col4">Lorem ipsum dolor</div>
</div>

jsFiddle

Descubro que esto me ha mordido repetidamente a lo largo de los años tanto para flex como para cuadrícula, así que voy a sugerir lo siguiente:

* { min-width: 0; min-height: 0; }

y luego solo use min-width: autoo min-height: autosi necesita ese comportamiento.

De hecho, agregue también el tamaño de la caja para que todo el diseño sea más sano:

* { box-sizing: border-box; min-width: 0; min-height: 0; }

¿Alguien sabe si hay consecuencias extrañas? No he encontrado nada en varios años de usar una combinación de los anteriores. De hecho, no puedo pensar en ningún caso en el que quisiera diseñar desde el contenido hacia afuera hasta el flex / grid, en lugar de flex / grid hacia adentro del contenido, y seguramente si existen, son raros. Entonces esto se siente como un mal valor predeterminado. ¿Pero tal vez me estoy perdiendo algo?