html css - ¿Por qué los elementos de flexión no se reducen después del tamaño del contenido?




1 Answers

El tamaño mínimo automático de los 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 los 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 elementos Flex

Para proporcionar un tamaño mínimo predeterminado más razonable para los artículos flexibles, esta especificación introduce un nuevo valor auto como el valor inicial de las propiedades min-width y min-height definidas en CSS 2.1.

Con respecto al valor auto ...

En un elemento flexible cuyo overflow es visible en el eje principal, cuando se especifica en la propiedad min-size del eje principal del elemento Flex, especifica un tamaño mínimo automático . De lo contrario, calcula a 0 .

En otras palabras:

  • El min-width: auto y min-height: auto valores predeterminados min-height: auto solo se aplican cuando el overflow está visible .
  • Si el valor de overflow no está visible , el valor de la propiedad min-size es 0 .
  • Por lo tanto, overflow: hidden puede ser un sustituto de min-width: 0 y 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 obtiene min-height: auto de forma predeterminada.
  • Para una explicación más detallada, vea esta publicación:
    • min-width rendering de forma diferente en flex-direction: fila y flex-direction: column

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

Envases flexibles anidados

Si está tratando con elementos flexibles en múltiples niveles de la estructura HTML, puede ser necesario anular el min-width: auto predeterminado min-width: auto / min-height: auto en elementos en niveles superiores.

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

Ejemplos:

  • El elemento Flex no se está encogiendo más pequeño que su contenido
  • Ajustar al niño en el padre
  • la propiedad CSS en blanco-espacio está creando problemas con flex

Notas de reproducción del navegador

  • Chrome vs. Firefox / Edge

    Desde al menos 2017, parece que Chrome está (1) retrocediendo al min-width: 0 / min-height: 0 valores predeterminados, o (2) aplicando automáticamente los valores predeterminados 0 en determinadas situaciones en función de un algoritmo de misterio. (Esto podría ser lo que llaman una intervention ). Como resultado, muchas personas ven cómo su diseño (especialmente las barras de desplazamiento deseadas) funcionan como se esperaba en Chrome, pero no en Firefox / Edge. Este problema se trata con más detalle aquí: discrepancia de flex-shrink entre Firefox y Chrome

  • IE11

    Como se indica en la especificación, el valor auto para las propiedades min-width y min-height es "nuevo". Esto significa que algunos navegadores aún pueden representar un valor 0 por defecto, porque implementaron el diseño flexible antes de actualizar el valor y porque 0 es el valor inicial para min-width y min-height en CSS 2.1 . Uno de esos navegadores es IE11. Otros navegadores se han actualizado al valor auto más nuevo como se define en la especificación 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

ancho altura

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 se hace más ancha de lo que debería debido a la propiedad flex.

Traté de usar el word-break: break-word y me ayudó, pero aún 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 lo hace obtener un ancho más pequeño que un tamaño de letra.

Mire este video: http://screencast-o-matic.com/watch/cDetln1tyT (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 flex ajustes siempre; tamaños flexibles 1: 3: 4: 4)

Sé que ajustar el tamaño de la fuente y el relleno de la columna a un tamaño menor ayudará ... pero, ¿hay alguna otra solución?

No puedo usar overflow-x: hidden .

JSFiddle: https://jsfiddle.net/78h8wv4o/3/

.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>




Related