Min-width does not work on nested flexbox - css

Question

This code has min-width working.
.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>
However, if you set align-items: flex-start; to .header-text, min-width will not work. Here is the code.
.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>
I thought that flex-direction had an effect and changedmin-width: 0;tomin-height: 0;, but it did not work out.
Also, I read the specification of this, but I could not do anything.
https://drafts.csswg.org/css-flexbox/#min-size-opt
https://drafts.csswg.org/css-flexbox/#align-items-property
I am the first time to see this phenomenon.
Why does this happen? Is there a solution?
Thank you.

Answer 1

The issue is not with min-width as you may think because if you add border you will see that all the elements aren't overflowing (due to min-width:0) and only the last span is overflowing
.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>
So we can simplify your issue like follow:
.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>
Why align-items break you code? Simply because the initial value was stretch which mean that you span will have its width to be stretched to fit the width of the flex container (like doing width:100%). By chaging the alignment you no more have this feature and you create the overflow.
To fix this you can simply use width:100% instead. The main idea is to have a property that will force the width to be full width of the parent element so that you limit the width of the element thus the ellipsis will work:
.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>
And with your initial code:
.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

Add overflow:hidden to the .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>