I want the blue text ( element) which is inside a flex item to get truncated with ellipsis (…) if text is too long. To do so I have to add min-width:0 to the parent (.entity-container). You can click Toggle element min-width to see how adding min-width:0 affects the code. It adds the ellipsis but it breaks also the flex-wrap: wrap property of .monitored-entities grandparent. In other words flex-wrap: wrap acts like flex-direction: row instead. How can I in the same time keep the blue text truncation with ellipsis and the flex-wrap: wrap property behaviour?
document.querySelector('button').addEventListener('click',
() => {
[...document.querySelectorAll('.entity-container')]
.map(item => item.style.minWidth != '' ?
item.style.minWidth = '' :
item.style.minWidth = 0)
}).monitored-entities {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.entity-title {
padding-top: 16px;
padding-bottom: 16px;
text-overflow: ellipsis;
overflow: hidden;
}
.entity-container {
border-radius: 16px;
border-style: solid;
border-width: 1px;
padding: 32px;
margin: 16px;
display: flex;
flex-direction: column;
flex: 1;
min-width: initial;
}
.entity-container > span {
font-size: 30px;
color: blue;
}
.entity-variables div {
display: flex;
}<div style='max-width: 400px'>
<button>Toggle element min-width</button>
<div class="monitored-entities">
<div class="entity-container" style="">
<span class="entity-title">host.webdata.replica.123456789.123456789.123456789</span>
<div class='entity-variables'>
<div><span class="variable-name"> health: </span><span>Bad</span></div>
</div>
</div>
<div class="entity-container">
<span class="entity-title">db.webdata.source</span>
<div class='entity-variables'>
<div><span class="variable-name"> health: </span><span>Good</span></div>
</div>
</div>
<div class="entity-container">
<span class="entity-title">db.webdata.replica</span>
<div class='entity-variables'>
<div><span class="variable-name"> health: </span><span>Bad</span></div>
</div>
</div>
</div>
</div>
min-width: 0 does not break the flex-wrap: wrap property of .monitored-entities. The issue you’re encountering is caused by nested flex containers, where the child container (.entity-variables div) lacks flex-wrap: wrap.
To fix this, you have two options:
- Remove the nested flex container (
.entity-variables div). - Add
flex-wrap: wrapto the nested flex container to allow its content to wrap correctly.
Here’s how you can apply the second option:
document.querySelector('button').addEventListener('click',
() => {
[...document.querySelectorAll('.entity-container')]
.map(item => item.style.minWidth != '' ?
item.style.minWidth = '' :
item.style.minWidth = 0)
}).monitored-entities {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.entity-title {
padding-top: 16px;
padding-bottom: 16px;
text-overflow: ellipsis;
overflow: hidden;
}
.entity-container {
border-radius: 16px;
border-style: solid;
border-width: 1px;
padding: 32px;
margin: 16px;
display: flex;
flex-direction: column;
flex: 1;
min-width: initial;
}
.entity-container > span {
font-size: 30px;
color: blue;
}
.entity-variables div {
display: flex;
flex-wrap: wrap;
} <div style='max-width: 400px'>
<button>Toggle element min-width</button>
<div class="monitored-entities">
<div class="entity-container">
<span class="entity-title">host.webdata.replica.123456789.123456789.123456789</span>
<div class='entity-variables'>
<div><span class="variable-name"> health: </span><span>Bad</span></div>
</div>
</div>
<div class="entity-container">
<span class="entity-title">db.webdata.source</span>
<div class='entity-variables'>
<div><span class="variable-name"> health: </span><span>Good</span></div>
</div>
</div>
<div class="entity-container">
<span class="entity-title">db.webdata.replica</span>
<div class='entity-variables'>
<div><span class="variable-name"> health: </span><span>Bad</span></div>
</div>
</div>
</div>
</div>