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

Tengo 4 columnas de Flexbox y todo funciona bien, pero cuando agrego algo de texto a una columna y lo configuro en un tamaño de fuente grande, la columna se hace 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 siempre la configuración de flexión; tamaños de flexión 1: 3: 4: 4)

Lo sé, configurar el tamaño de fuente y el relleno de columnas 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>

Mar 27 '16 19:03 tomas657

Descubrí que esto me ha afectado repetidamente a lo largo de los años, tanto para flex como para grid, así que voy a sugerir lo siguiente:

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

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

De hecho, agregue también el tamaño del cuadro para que todo el diseño sea más sensato:

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

¿Alguien sabe si hay alguna consecuencia extraña? No he encontrado nada en varios años usando una combinación de lo anterior. De hecho, no se me ocurre ningún caso en el que quisiera diseñar desde el contenido hacia afuera hasta flex/grid, en lugar de flexionar/grid hacia adentro hasta el contenido, y seguramente, si existen, son raros. Entonces esto se siente como un mal incumplimiento. ¿Pero tal vez me estoy perdiendo algo?

Aug 24 '2020 08:08 voracity

La respuesta pura a su pregunta es que, de forma predeterminada, los navegadores tienden a mostrar la mayor cantidad de información posible al lector (y no a ocultar nada).

Esto sucede de forma predeterminada e incluso incluye mostrar fuentes de color negro predeterminadas sobre un fondo blanco (para obtener el máximo contraste y legibilidad de la página), agregar una barra de desplazamiento donde el contenido es más grande que la altura (o ancho) de la ventana gráfica o seguir mostrando contenido de un marcado ( o el color de fondo) incluso si se colocó por error después </body>o incluso </html>de las etiquetas en el archivo html.

En el contexto de CSS, esto también se aplica, pero además puedes jugar con muchas personalizaciones.

Incluso en una pantalla, si se usa una fuente enorme (como font-size: 50em;), esto inicialmente actúa como un elemento desbordante (y colocar la fuente dentro de un contenedor secundario flexible usando display: flexno cambia este comportamiento predeterminado a menos que use overflow: hiddeno cambie el tamaño del elemento de alguna manera.

Una solución elegante es utilizar un cambio de tamaño dinámico de las letras, por ejemplo

font-size: calc(0.5em + 2vw)

que funciona muy bien incluso en un escenario responsivo.

Como se mencionó en una respuesta anterior, un elemento flexible no puede ser más pequeño que el tamaño de su contenido a lo largo del eje principal (por la misma razón, eso no solo es específico del modelo flexbox implementado en CSS sino también de la forma de trabajo interna del navegador) . Incluso una palabra larga se muestra con una barra de desplazamiento si es más larga que el ancho de visualización, como si fuera un elemento de tipo bloque con un tamaño fijo.

Esto se menciona en las antiguas especificaciones HTML 4.01 como

"Por convención, los agentes de usuario HTML visuales ajustan las líneas de texto para que quepan dentro de los márgenes disponibles. Los algoritmos de ajuste dependen del script que se formatea.

En las escrituras occidentales, por ejemplo, el texto sólo debe ajustarse a espacios en blanco. "

como se ve aquí en el párrafo 9.5.3. Esto significa que, desde entonces, el texto tuvo que mostrarse continuamente de forma predeterminada (a menos que decidamos dividirlo, pero no a nivel de un solo carácter: un solo carácter no blanco mostrado en un tamaño de 120 em activará la visualización de barras de desplazamiento en el navegador).

Las palabras también están claramente definidas en el párrafo 9.1 de la misma fuente:

Aquí utilizamos el término "palabra" para referirnos a "secuencias de caracteres que no son espacios en blanco".

El propósito de mostrar el formato original de cualquier palabra es no destruir, ocultar o distorsionar la información original, el significado o la intención del autor del código. Como tal, también podemos  mantener en la misma línea dos palabras que están conectadas, cuando separarlas puede resultar perjudicial (como Nueva York, 22:00 horas, 10 km/h, § 10, etc.)

Apr 19 '2022 20:04 Eve