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


Answers

Question

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>




Links