Приспособление ребенка к родителю

Question

Я вложил 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>

Я могу это исправить, применяя 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;
  overflow: hidden;
}

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

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

Но мне не очень нравится это решение.

Есть ли способ исправить это, используя только свойства flex?

Answer 1

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

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

Затронутые гибкие элементы:

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

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

1. добавлять min-width: 0 сгибать предметы
2. добавлять 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>