Eu tenho um componente que consiste em texto ao lado de um botão. O texto deve encolher e ser cortado se não houver espaço suficiente disponível. Como isso:

.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 vê-lo funcionando, maximize o trecho e reduza a janela do navegador para ver o texto truncado.

E funciona bem como você pode ver.

Dentro de outro contêiner flexível

O problema surge quando tento colocar esse componente dentro de outro contêiner flex.

Minha página consiste em uma área lateral fixa e a parte restante à direita que se ajusta ao espaço restante. Meu componente deve se encaixar nesta segunda parte, então coloquei lá:

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

No segundo caso, o texto não diminui. Estou usando o Chrome, mas parece ser um problema também em outros navegadores.