¿Por qué los elementos flexibles no reducen el tamaño del contenido?


313

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

Traté de 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 en el texto se dividen en varias líneas (una letra por línea), y sin embargo, la columna no tiene un ancho menor que un tamaño de 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 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>

Respuestas:


543

El tamaño mínimo automático de artículos flexibles

Estás encontrando 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 columna, respectivamente.

Puede anular estos valores predeterminados configurando elementos flexibles en:

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

Especificación de Flexbox

4.5. Tamaño mínimo automático de artículos 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 que 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, se calcula a 0.

En otras palabras:

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

y...


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

Contenedores Flex Anidados

Si se trata de elementos flexibles en múltiples niveles de la estructura HTML, puede ser necesario anular los elementos predeterminados min-width: auto/ min-height: autoactivados en niveles superiores.

Básicamente, un elemento flexible de nivel superior con min-width: autopuede evitar la reducción en los elementos anidados a continuación con min-width: 0.

Ejemplos:


Notas de renderizado 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 llaman una intervención ). Como resultado, muchas personas están viendo que su diseño (especialmente las barras de desplazamiento deseadas) funciona como se espera en Chrome, pero no en Firefox / Edge. Este problema se trata con más detalle aquí: discrepancia de reducción flexible entre Firefox y Chrome

  • IE11

    Como se señala en la especificación, el auto valor de las propiedades min-widthy min-heightes "nuevo". Esto significa que algunos navegadores aún pueden representar un 0valor por defecto, porque implementaron el diseño flexible antes de que el valor se actualizara y porque 0es el valor inicial para min-widthy min-heighten CSS 2.1 . Uno de esos navegadores es IE11. Otros navegadores se han actualizado al autovalor más nuevo como se define en la especificación de flexbox .


Demo revisada

jsFiddle


2
Tenía una etiqueta padre <fieldset> mucho más arriba en el dom que causaba el mismo problema. Establecer su ancho mínimo en 0 lo arregló.
Jan Swart

1
Alguna idea sobre este: stackoverflow.com/a/36247448/8620333 .. Descubrí que tiene que ver con min-widthtodos los detalles, pero no estoy muy seguro.
Temani Afif

3
Parece que Chrome cambió el comportamiento en v73 para no reducir el tamaño del contenido.
maccam94

2
La misma solución con la que funcionó min-height: 0;. Tuve que intentar configurar esto para varios elementos superiores en el árbol.
Ben Wheeler

Tuve que establecer min-height: 0;en ike 10 lugares para que funcione. Gracias, gracias, gracias por el gran consejo!
dave0688
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.