Установка ребенка в родителя

У меня есть вложенные элементы flex с текстом внизу. Верхний элемент имеет фиксированную ширину, меньшую, чем текст:

.list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
}

.header-container {
  display: flex;
  flex: 1;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>

ОТВЕТЫ

Ответ 1

Исходная настройка элементов flex - min-width: auto. Это означает, что элементы гибкости не могут быть меньше ширины их содержимого.

У вас есть white-space: nowrap в текстовом элементе. В результате все предки из гибких элементов должны расширяться (в эффекте домино) для размещения длины текста.

Поврежденные элементы гибкости:

  • .list-component
  • .header-container
  • .header-text

Поэтому, чтобы предотвратить переполнение текста основного контейнера, вам необходимо переопределить значение min-width: auto по умолчанию. Спецификация flexbox предоставляет два метода для этого:

  • Добавить min-width: 0 для гибких элементов
  • Добавить overflow с любым значением, отличным от visible, для гибких элементов. (Вот почему вы смогли исправить проблему, добавив overflow: hidden. Это действительно чистое и действительное решение.)

Это более подробно объясняется в этом сообщении:

.list-header {
  display: flex;
  width: 150px;
  height: 80px;
  background-color: #ececec;
}

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;         /* NEW */
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;         /* NEW */
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;         /* NEW */
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
<div class="list-header">
  <div class="list-component">
    <div class="header-container">
      <div class="header-text">
        <span>long long long long long long text</span>
      </div>
    </div>
  </div>
</div>