¿Por qué no los artículos flexibles se reducen más allá del tamaño del contenido

html css flexbox


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

Intenté usar word-break: break-word y 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 obtener 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é,ajustar el tamaño de la fuente y el relleno de la columna a 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>





Answer 1 Michael_B


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

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 por defecto son...

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

...para los artículos flexibles en dirección de fila y 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 del 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 valor auto mático como el valor inicial de las propiedades min-width y min-height definidas en CSS 2.1.

Con respecto al valor auto mático ...

En un elemento flexible cuyo overflow es visible en 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:

  • El min-width: auto y min-height: auto valores predeterminados automáticos solo se aplican cuando el overflow es visible .
  • Si el valor de overflow no es visible , el valor de la propiedad de tamaño mínimo es 0 .
  • Por lo tanto, overflow: hidden puede ser un sustituto de min-width: 0 y min-height: 0 .

and...


¿Has aplicado el ancho mínimo:0 y el artículo 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 el min-width: auto predeterminado : auto / min-height: auto en elementos en niveles superiores.

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

Examples:


Notas de representación del navegador

  • Chrome frente a Firefox / Edge

    Desde al menos 2017, parece que Chrome está (1) volviendo al min-width: 0 / min-height: 0 valores predeterminados, o (2) aplicando automáticamente los valores predeterminados 0 en ciertas situaciones basadas en 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 indica en la especificación, el valor auto mático para las propiedades min-width y min-height es "nuevo". Esto significa que algunos navegadores aún pueden representar un valor 0 de forma predeterminada, porque implementaron el diseño flexible antes de que el valor se actualizara y porque 0 es el valor inicial para min-width min-height en CSS 2.1 . Uno de esos navegadores es IE11. Otros navegadores se han actualizado al valor auto mático más nuevo como se define en la especificación flexbox .


Demostración 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