I have nested flex elements with a text at the bottom. The top element has fixed width that is smaller than text:
.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>I can fix this by applying overflow: hidden; to all elements:
.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>But I don't really like this solution.
Is there are way to fix it using only flex properties?