I am working with a flex-box container named .search-bar, which contains two divs with text, labeled as .title. My goal is to make the second child take up any extra space available and only start ellipsizing when there is no more space left for the first child. Essentially, I want the first child to be ellipsized to show the full content of the second child.
Below is a demonstration:
.search-bar {
flex: 1;
display: flex;
align-items: center;
overflow: hidden;
width: 500px;
background: white;
}
.title {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
flex-shrink: 1;
}
.title:last-of-type {
flex: 1;
flex-shrink: 0;
}
.title + .title::before {
content: '>';
margin: 0 10px;
}<div class='search-bar'>
<div class='title'>
Doop Doop Doop Doop Doop Doop Doop
</div>
<div class='title'>
Doge Doge Doge Doge Doge Doge Doge
</div>
</div>The flex-shrink: 0 property on the last title does not seem to have an effect, as the last child always gets ellipsized. Is there a way to ensure that the first title ellipsizes before the second?
For reference, here is a fiddle link: https://jsfiddle.net/6fs9gc00/