Text-overflow: многоточие не работает во вложенном гибком контейнере

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

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

Ответ 1

Решение

Добавьте min-width: 0 к внешнему элементу flex (.content/demo)

или

Добавьте overflow: hidden к внешнему элементу flex (.content/demo)

Описание

Первоначальная настройка контейнера гибкости min-width: auto на гибких элементах.

Это означает, что элемент гибкости не может быть меньше размера его содержимого.

В исходном коде текстовое поле (элемент гибкости) становится меньше из-за overflow: hidden.

Без этого правила вы будете иметь то же поведение, что и второй пример.

Демо: Когда overflow: hidden удаляется, первый пример ведет себя как второй пример.

Во второй версии вашего кода основные элементы гибкости .side и .content.

По умолчанию .content не может быть меньше его содержимого (независимо от flex-shrink)... пока вы не переопределите min-width: auto с помощью min-width: 0 или, как в первом примере, примените overflow: hidden.

Из спецификации:

4.5. Подразумевается минимальный размер Flex Элементы

Чтобы обеспечить более разумный минимальный размер по умолчанию для гибких элементов, это спецификация вводит новое значение auto в качестве начального значения свойства min-width и min-height, определенные в CSS 2.1... читать больше

В следующем примере см. Почему не гибкий элемент сжимается до размера содержимого?

Ответ 2

Используйте свойство width для работы с overflow

Примечание. Ширина должна быть px

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}
.container .text {
  flex: 1 1 auto;
  width: 250px;
  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 ndgsdgeeded.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>