переполнение текста: многоточие не работает во вложенном гибком контейнере

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

.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, но это похоже на проблему и в других браузерах.

Ответы на вопрос(2)

Решение Вопроса
Решение

добавлятьmin-width: 0 к внешнему гибкому элементу (.content / демонстрация)

или же

добавлятьoverflow: hidden к внешнему гибкому элементу (.content / демонстрация)

объяснение

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

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

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

Без этого правила вы будете вести себя так же, как во втором примере.

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

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

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

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

4,5. Подразумеваемый минимальный размер элементов Flex

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

Для другого примера см .:Почему гибкий элемент не уходит от размера контента?

 Jonathan Marzullo29 июл. 2016 г., 16:16
Отличное объяснение @Michael_B, я согласен, что это должен быть принятый ответ :)
 Andry29 июл. 2016 г., 16:52
Теперь я понял! Это то разъяснение, которое я искал. Спасибо
 Andry01 авг. 2016 г., 08:53
настройкаmin-width:0 работает в хроме но не в IE ...overflow:hidden работает на обоих

использованиеwidth свойство работать сoverflow

Замечания: Ширина должна быть вПВ

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

 Sankar29 июл. 2016 г., 13:45
Нет, это из-заflex: 1 1 auto;  text-overflow: ellipsis; работает только когда у вас есть свойство width со статическим значением.
 Andry29 июл. 2016 г., 13:49
Человек, очень круто! Как ты получил это? Иногда я думаю, что CSS нужны некоторые значения для работы всей модели, в данном случае с переполнением, я могу считать это общим правилом, так как измерения необходимы, чтобы знать, с чего начать усечение, верно?
 Andry29 июл. 2016 г., 13:38
Вау .... как это возможно? Это ошибка в flex?
 Sankar29 июл. 2016 г., 13:58
Да, точно...

Ваш ответ на вопрос