Obtuve un contenedor flexible que contiene 2 elementos. Aquí hay una demostración de JSFiddle . El primero es un encabezado dinámico con texto. El segundo es un contenedor para múltiples botones dinámicos . Dinámico, lo que significa que el texto se genera con javascript y no tiene un width específico y puede haber de 2 a 4 botones según el usuario (por lo que no puedo configurar flex-basis o el width en una cantidad específica de px en estos elementos flexibles).

Establecí el desbordamiento del texto en hidden y la propiedad de text-overflow en ellipsis .

Ahora me gustaría que los botones se ajusten a una nueva línea solo cuando el texto haya desaparecido por completo. Esto es lo que quiero decir:

Este artículo me ha llevado a creer que tiene algo que ver con la propiedad flex-basis .

El primer problema con la envoltura flexible es que los artículos flexibles solo comenzarán a envolverse si su base flexible total es mayor que el tamaño del contenedor flexible.

Sin embargo, independientemente de las propiedades que pruebo, parece que no puedo hacer que funcione como quiero.

 .wrapper { display: flex; justify-content: space-between; border: 1px solid red; max-width: 600px; } .flex-wrapper { display: flex; min-width: 0; } .header { overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; line-height: 24px; } .actions { display: flex; /* Only wrap once the text is fully gone and not visible anymore. */ /* flex-wrap: wrap; */ } .actions button:not(:last-child) { margin-right: 10px; }

 <div class="wrapper"> <div class="flex-wrapper"> <div class="header"> Lorem ipsum dolar sit amet constructeur </div> </div> <div class="actions"> <button> button1 </button> <button> button2 </button> <button> button3 </button> <button> button4 </button> </div> </div>