Ellipsis not working in flex container

Question

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/

I actually found a solution myself. It seems that if you set a min-width of 0 on the song-wrapper div, it fixes itself. Not sure why, but it works across Chrome, Firefox, and at least IE11. https://jsfiddle.net/13ohs7jx/1/ — jas7457, Oct 15 '16 at 22:06

score 9 · Accepted Answer · edited May 23 '17 at 12:06

Solution

You have 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;
}

.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>

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. This means that the text in your flex item is setting the minimum width.

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:

Why doesn't flex item shrink past content size?

Oh nice, this approach works too! It seems you need it on both the parent and the child for this to work, but it fixes it. Thanks for the help! — jas7457, Oct 15 '16 at 22:09

Ellipsis not working in flex container

1 Answers1

Solution

Explanation

Related