Минимальная ширина не работает на вложенном flexbox

Question

Этот код имеет минимальную ширину работы.

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

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

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

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>

Однако, если вы установите align-items: flex-start; в .header-text, минимальная ширина не будет работать.Вот код.

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

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

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;　/* ADD THIS!! */
  min-width: 0;
}

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-direction дал эффект и изменил min-width: 0; на min-height: 0;, но это не сработало.

Кроме того, я прочитал спецификацию этого, но я ничего не мог сделать.

• https://drafts.csswg.org/css-flexbox/#min-size-opt
• https://drafts.csswg.org/css-flexbox/#align-items-property

Я первыйвремя увидеть это явление.Почему это происходит?Есть ли решение?

Спасибо.

Answer 1

Проблема не в min-width, как вы можете подумать, потому что если вы добавите рамку, вы увидите, что все элементы не переполняются (из-за min-width:0), и переполняется только последний диапазон

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

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;
  border:2px solid blue;
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;
  border:2px solid green;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:flex-start;
  min-width: 0;
  border:2px solid yellow;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border:2px solid;
}

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

Таким образом, мы можем упростить вашу проблему следующим образом:

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  border: 2px solid yellow;
  width: 150px;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid;
}

<div class="header-text">
  <span>long long long long long long text</span>
</div>

Почему align-items нарушает ваш код?Просто потому, что начальное значение было stretch, что означает, что ваш диапазон будет иметь ширину, которая будет растянута, чтобы соответствовать ширине гибкого контейнера (как при выполнении width:100%).Изменяя выравнивание, у вас больше нет этой функции, и вы создаете переполнение.

Чтобы исправить это, вы можете просто использовать width:100% вместо этого.Основная идея состоит в том, чтобы иметь свойство, которое заставит ширину быть полной ширины родительского элемента, чтобы вы ограничили ширину элемента, таким образом, многоточие будет работать:

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  min-width: 0;
  border: 2px solid yellow;
  width: 150px;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border: 2px solid;
  width:100%;
}

<div class="header-text">
  <span>long long long long long long text</span>
</div>

И с вашим исходным кодом:

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

.list-component {
  display: flex;
  flex: 1;
  padding-left: 24px;
  padding-right: 24px;
  min-width: 0;
  border:2px solid blue;
}

.header-container {
  display: flex;
  flex: 1;
  min-width: 0;
  border:2px solid green;
}

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:flex-start;
  min-width: 0;
  border:2px solid yellow;
}

span {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  border:2px solid;
  width:100%;
}

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

Answer 2

Добавьте overflow:hidden к .header-container div:

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

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

.header-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;　/* ADD THIS!! */
  min-width: 0;
}

span {
  white-space: nowrap;
}

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