Таинственное поведение во флекс-направлении: колонка

Question

Когда я пишу такой код, я знаю, что текст не разрывается.

.a {
  display: flex;
  border: 1px solid yellow;
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Причиной этой проблемы является то, что min-width: auto устанавливает ширину текста гибкого элемента на min-width. Поэтому эта проблема решается с помощью min-width: 0.

.a {
  display: flex;
  border: 1px solid yellow;
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
  min-width: 0; /* add this code! */
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Далее я написал такой код.

Однако min-width этого кода не сработал, как я ожидал, и длинное словопереполнена.Это проблема, которая не возникла в flex-direction: row.В чем причина этого?

Почему min-width: 0 не работает в направлении flex-direction: column?

.a {
  display: flex;
  flex-direction: column;
  border: 1px solid yellow;
  align-items: start;
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
  min-width: 0;
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Answer 1

Для flex-direction: row главная ось равна по горизонтали , а поперечная ось равна по вертикали .
Для flex-direction: column они переключаются так, что главная ось равна по вертикали и по оси равна по горизонтали , вы знаете.

Теперь позвольте мне напомнить вам, что свойства
justify-content, flex-grow, flex-shrink и flex-basis работают на главной оси
align-items работают на кросс-ось

Когда вы устанавливаете align-items: start, вы переопределяете значение по умолчанию align-items: stretch, и ваш flex-item может принимать любой width, который больше min-width (как ни * 1040)* не указываются ни *, ни 1041 *).

Для достижения желаемого поведения было бы достаточно удалить align-items: start;
min-width: 0 также можно безопасно удалить, поскольку он ничего не делает.

См. Фрагмент ниже:

.a {
  display: flex;
  flex-direction: column;
  border: 1px solid yellow;
  /* align-items: start; let's use default value instead */
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
  /* min-width: 0; this does nothing */
}

<div class="a">
  <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>

Answer 2

Вам просто нужно указать div .b явную ширину, иначе элемент будет расширен до размера содержимого.Используя ваш код, это так просто:

.a {
  display: flex;
  flex-direction: column;
  border: 1px solid yellow;
  align-items: start;
}

.b {
  border: 1px solid green;
  overflow-wrap: break-word;
  // min-width: 0;
  width: 100%;
}

    <div class="a">
   <div class="b">texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext</div>
</div>