desbordamiento de texto: los puntos suspensivos no funcionan en un contenedor flexible anidado
Tengo un componente que consiste en texto al lado de un botón. El texto debe reducirse y cortarse si no hay suficiente espacio disponible. Me gusta esto:
.container .box {
background-color: #efefef;
padding: 5px;
border: 1px solid #666666;
flex: 0 0 auto;
}
.container .text {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container {
display: flex;
}
<div class="container">
<div class="text">This is a text that is supposed to get truncated properly when needed.</div>
<div class="box">Hello</div>
</div>
Importante: Para verlo funcionar, maximice el fragmento y reduzca la ventana del navegador para ver el texto truncado.
Y funciona bien como puedes ver.
Dentro de otro contenedor flexibleEl problema surge cuando intento colocar este componente dentro de otro contenedor flexible.
Mi página consta de un área lateral, fija, y la parte restante a la derecha que se ajusta al espacio restante. Mi componente debe encajar en esta segunda parte, así que lo puse allí:
.container .box {
background-color: #efefef;
padding: 5px;
border: 1px solid #666666;
flex: 0 0 auto;
}
.container .text {
flex: 1 1 auto;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.container {
display: flex;
}
.main {
display: flex;
}
.main .side {
width: 100px;
background-color: #ff9900;
flex: 0 0 auto;
}
.main .content {
flex: 1 1 auto;
}
<div class="main">
<div class="side"></div>
<div class="content">
<div class="container">
<div class="text">This is a text that is supposed to get truncated properly when needed.</div>
<div class="box">Hello</div>
</div>
</div>
</div>
En el segundo caso, el texto no se contrae. Estoy usando Chrome pero parece un problema también en otros navegadores.