text-overflow: ellipsis not working in a nested flex container

Question

I have a component which consists of text next to a button. The text must shrink and get cut off if not enough space is available. Like this:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

<div class="container">
  <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
  <div class="box">Hello</div>
</div>

Important: To see it working, maximize the snippet and shrink the browser window in order to see the text truncate.

And it works fine as you can see.

Inside another flex container

The problem comes when I try to put this component inside another flex container.

My page consists of a side area, fixed, and the remaining part on the right which adjust to the space remaining. My component must fit into this second part, so I put it there:

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}

.container .text {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.container {
  display: flex;
}

.main {
  display: flex;
}

.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}

.main .content {
  flex: 1 1 auto;
}

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when needed.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>

In the second case, the text does not shrink. I am using Chrome but it looks like a problem also in other browsers.

Answer 1

Solution

Add min-width: 0 to the outer flex item (.content / demo)

or

Add overflow: hidden to the outer flex item (.content / demo)

---

Explanation

An initial setting of a flex container is min-width: auto on flex items.

This means that a flex item cannot be smaller than the size of its content.

In your original code, the text box (a flex item) gets smaller due to overflow: hidden.

Without that rule, you'll have the same behavior as the second example.

Demo: When overflow: hidden is removed, first example behaves like second example.

In the second version of your code, the primary flex items are .side and .content.

By default, .content cannot be shorter than its content (regardless of flex-shrink)... until you override min-width: auto with min-width: 0 or, like the first example, apply overflow: hidden.

From the spec:

4.5. Implied Minimum Size of Flex Items

To provide a more reasonable default minimum size for flex items, this specification introduces a new auto value as the initial value of the min-width and min-height properties defined in CSS 2.1... read more

For another example see: Why doesn't flex item shrink past content size?

Answer 2

Use width property to work with overflow

Note: Width should be in px

.container .box {
  background-color: #efefef;
  padding: 5px;
  border: 1px solid #666666;
  flex: 0 0 auto;
}
.container .text {
  flex: 1 1 auto;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.container {
  display: flex;
}
.main {
  display: flex;
}
.main .side {
  width: 100px;
  background-color: #ff9900;
  flex: 0 0 auto;
}
.main .content {
  flex: 1 1 auto;
}

<div class="main">
  <div class="side"></div>
  <div class="content">
    <div class="container">
      <div class="text">This is a text that is supposed to get truncated properly when ndgsdgeeded.</div>
      <div class="box">Hello</div>
    </div>
  </div>
</div>