CSS: Cómo reducir el primer div en el contenedor en lugar de salir del contenedor

El usuario puede cambiar el ancho del contenedor, puede ser más corto que el espacio necesario para ambos contenedores. Lo que necesito es reducir el primer contenedor si tal situación ocurre. Aquí el resultado esperado: "First div con ... Second div content". ¿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/rH3ABKvFRltvAL1rXqkr?p=preview":

<div class="container">
  <div class="first">first div content</div>
  <div class="second">second div content</div>
</div>

Respuestas a la pregunta(1)

Su respuesta a la pregunta