Is it possible to shrink an inner nested flex item instead of having it overflow the parent?

Question

I have nested flex items like this (https://jsfiddle.net/e1bm2s2x/1):

As you shrink the width of the outside container (I drag the width of the JSFiddle pane), container-2 first shrinks and the text overflows with ellipses. That is what I want. But then it stops shrinking and overflows the parent container. I would like for container-2 to keep shrinking instead of overflowing container-1. I've played with this a lot but to no avail. Is this possible?

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  align-items: center;
}

.container-1 {
  border: 3px solid orange;
}

.container-2 {
  border: 3px solid green;
  flex: 1 1 0;
}

.content {
  flex: 1 1 0;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fixed {
  flex: 0 0 50px;
  border: 3px solid brown;
}

<div class="container container-1">
  <div class="fixed">
    left
  </div>
  <div class="container container-2">
    <div class="content">
      words words words words words words words
    </div>
    <button class="fixed">
      right
    </button>
  </div>
</div>

Yes. It's possible. Just add `min-width: 0` to `.container-2`. https://jsfiddle.net/e1bm2s2x/2/ — Michael Benjamin, Mar 01 '17 at 18:39
Gah! Thank you. Any chance you could explain this a bit so that I might develop a mental model that prevents me from wasting many hours on this in the future? :) Also, if you add a reply, I would surely vote it up and accept it. — Dmitry Minkovsky, Mar 01 '17 at 18:43
Yes, thank you! I did Google. But did not find that. Makes sense that it would be a dupe of course. — Dmitry Minkovsky, Mar 01 '17 at 18:45
I think the dupe explains it pretty well. If you still have questions just lmk. — Michael Benjamin, Mar 01 '17 at 18:48
I really thought basis 0 in `flex: 1 1 0` did this but it pays to read and know the spec I guess :) — Dmitry Minkovsky, Mar 01 '17 at 18:54

Is it possible to shrink an inner nested flex item instead of having it overflow the parent?

0 Answers0