¿Cómo decide el contenedor inline-flex cuándo se envuelve el texto?
Tengo un problema con el recorte de texto donde los elementos flex se recortan demasiado pronto, a pesar de que su flex-basis se establece en 0, por lo que esperaría que el contenedor flex hiciera que todos los elementos fueran al menos tan grandes como el elemento más grande en el contenedor. De todos modos, aquí hay un ejemplo:
https://jsfiddle.net/nxbwufLk/
¿Cómo decide envolver el texto? ¿Por qué no estira el primer elemento?
.button {
flex: 1 1 0;
border: 1px solid red;
}
.container {
display: inline-flex;
}
<div class="container">
<div class="button">
Some text
</div>
<div class="button">
Some text that is very long indeed
</div>
</div>
Puedo ver que el segundo texto se envuelve, pero ¿cómo se decide eso? No se establecen anchos en ningún lugar.
davy.ai
De forma predeterminada, los elementos flexibles no superarán el tamaño de su contenedor principal. En este caso, el contenedor principal tiene
display: inline-flex
, lo que significa que su ancho está determinado por sus hijos. Por lo tanto, el primer elemento de botón no se está estirando al ancho completo del contenedor porque el segundo elemento de botón es más ancho.La forma en que se envuelve el texto dentro de un elemento flexible está determinada por su propiedad
flex-wrap
. En este caso,flex-wrap
está configurado con el valor predeterminado denowrap
, lo que significa que el texto no se envolverá y en su lugar se desbordará dentro del elemento de botón.Para solucionar el problema de la superposición de texto y asegurarse de que todos los elementos flexibles sean al menos tan grandes como el elemento más grande, puedes establecer
flex-wrap: wrap
en el elemento contenedor. Además, puedes establecermin-width: 0
en los elementos de botón para permitir que se contraigan si es necesario.CSS actualizado:
HTML actualizado: