CSS: Como reduzir a primeira div no contêiner em vez de sair do contêiner

O usuário pode alterar a largura do contêiner, pode ser menor que o espaço necessário para os dois contêineres. O que eu preciso é encolher o primeiro contêiner se tal situação acontecer. Resultado esperado aqui: "First div con ... Second div content". Existe uma maneira possível de fazer isso para todos os navegadores modernos? (são necessários os últimos Chrome, Firefox e IE 11). Aqui código html do exemplo "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>

questionAnswers(1)

yourAnswerToTheQuestion