Mysterious behavior in flex-direction: column - css

Question

When I write such code, I know that the text does not break.
.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>
The cause of this problem is that min-width: auto sets the text width of the flex item tomin-width.Therefore, this problem is solved with 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>
Next I wrote such a code.
However, the min-width of that code did not work as I expected and a long word overflowed. This is a problem that did not occur at flex-direction: row. What is the cause of this?
Why does min-width: 0 not work in 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

For flex-direction: row the main-axis is horizontal and the cross-axis is vertical.
For flex-direction: column they switch so the main-axis is vertical and cross-axis is horizontal, you know.
Now let me remind you that
justify-content, flex-grow, flex-shrink and flex-basis properties work on the main-axis
align-items works on the cross-axis
When you set align-items: start you're overriding the default align-items: stretch and your flex-item can take any width which is greater than min-width (as neither width nor max-width are specified).
To achieve the desired behavior it would be enough to remove align-items: start;
min-width: 0 can be also safely removed as it does nothing.
See the snippet below:
.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

You just need to give div .b an explicit width, or the element will expand to fit content. Using your code, this is as simple as:
.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>