user1771700 user1771700 - 1 month ago 15
CSS Question

Ellipsis not working in flex container

I'm trying to create a layout (which will be a music player) with flex.

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

I then have some song info (current time, song title, and total time) that I want to display to the right of the buttons.

I pretty much always want the total time to be on the far right and for the song title to fill up the remaining width (with

flex-grow
), but to truncate with ellipsis as the window gets smaller.

Does anyone have any idea how to tweak this to get it to work properly?



.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

Solution

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

It also needs to be on the parent:

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

revised fiddle

Explanation

Both .song-wrapper and .song-title are flex items.

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

By default, a flex item cannot be smaller than the size of its content. A flex item's initial setting is min-width: auto.

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

Although you had overflow: hidden applied to .song-title, you didn't have anything overriding min-width: auto on .song-wrapper.

For a more detailed explanation see this post: