CSS: Cómo reducir el primer div en el contenedor en lugar de salir del contenedor (el segundo contenedor debe mostrarse justo después del primero) [cerrado]

He hecho una pregunta similar aquí:CSS: Cómo reducir el primer div en el contenedor en lugar de salir del contenedor, pero esta pregunta es más difícil: el usuario puede cambiar el ancho del contenedor, puede ser más corto que el espacio necesario para 3 contenedores. Lo que necesito es reducir el primer contenedor si tal situación ocurre, también el segundo contenedor debe mostrarse justo después del primero. Aquí el resultado esperado: "Primero div con ... Segundo contenido div Tercer contenido div". ¿Hay alguna manera de hacerlo para todos los navegadores modernos? (se necesitan las últimas Chrome, Firefox e IE 11). Aquí el código html del ejemplo "https://plnkr.co/edit/9FGmNOHYxjtsQMUpeVfm?p=preview":

<div class="container">
  <div class="first">First div content</div>
  <div class="second">Second div content</div>
  <div class="third">Third div content</div>
</div>

Respuestas a la pregunta(1)

Su respuesta a la pregunta