Ellipsis not working in a flexible container

Question

I am trying to create a layout (which will be a music player) using flex.

I have 3 buttons (previous, game, and next, represented by red squares), which I always want to be on the same line.

Then I have information about the song (current time, song name and total time) that I want to display to the right of the buttons.

I almost always want the total time to be in the far right corner, and the song name fill the remaining width (using flex-grow ), but to truncate with ellipse as the window shrinks.

Does anyone know how to tweak this to make it work correctly?

 .wrapper { display: flex; align-items: center; } ul { display: inline-block; list-style: none; flex-shrink: 0; } li { display: inline-block; width: 30px; height: 30px; background: red; margin-right: 3px; } .song-wrapper { background: beige; display: flex; flex-grow: 1; } .song-title { background: blue; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; } 

 <div class="wrapper"> <ul> <li></li> <li></li> <li></li> </ul> <div class="song-wrapper"> <span>1:23</span> <span class="song-title">This is the song title and I want it to ellipsize if the screen shrinks</span> <span>4:22</span> </div> </div> 

https://jsfiddle.net/13ohs7jx/

Answer 1

Decision

You have overflow: hidden applied to .song-title .

It should also be with the parent:

 .song-wrapper { overflow: hidden; /* NEW */ background: beige; display: flex; flex-grow: 1; } 

 .wrapper { display: flex; align-items: center; } ul { display: inline-block; list-style: none; flex-shrink: 0; } li { display: inline-block; width: 30px; height: 30px; background: red; margin-right: 3px; } .song-wrapper { background: beige; display: flex; flex-grow: 1; overflow: hidden; } .song-title { background: aqua; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-grow: 1; } 

 <div class="wrapper"> <ul> <li></li> <li></li> <li></li> </ul> <div class="song-wrapper"> <span>1:23</span> <span class="song-title">This is the song title and I want it to ellipsize if the screen shrinks</span> <span>4:22</span> </div> </div> 

modified violin

Description

Both .song-wrapper and .song-title are flexible elements.

.song-wrapper is a child of the main flex container ( .wrapper ), and .song-title is a child of the nested flex container ( .song-wrapper ).

By default, the flexibility item cannot be smaller than the size of its contents. Initial setting of the element element min-width: auto . This means that the text in the flex element sets the minimum width.

To override this option, you can use min-width: 0 or overflow: hidden .

Although you used overflow: hidden for .song-title , you had nothing to override min-width: auto on .song-wrapper .

See this post for a more detailed explanation:

• Why doesn't the flex element reduce the size of the content?