У меня есть компонент, который состоит из текста рядом с кнопкой. Текст должен сжиматься и обрезаться, если недостаточно свободного места. Как это:

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

Важный: Чтобы увидеть, как это работает, разверните фрагмент и уменьшите окно браузера, чтобы увидеть усеченный текст.

И это прекрасно работает, как вы можете видеть.

Внутри другого гибкого контейнера

Проблема возникает, когда я пытаюсь поместить этот компонент в другой гибкий контейнер.

Моя страница состоит из фиксированной боковой области и оставшейся части справа, которые соответствуют оставшемуся пространству. Мой компонент должен вписаться в эту вторую часть, поэтому я положил его туда:

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

Во втором случае текст не сжимается. Я использую Chrome, но это похоже на проблему и в других браузерах.