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 flexible

El 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.

Respuestas a la pregunta(2)

Su respuesta a la pregunta