CSS ellipsis inside flex item

Question

I have a layout based on flexbox. Two columns, one fixed size and the second need to take the rest space. In the grow column I have a string that I want it to be clipped.

In Chrome it works fine. But it doesn't work in Firefox and IE. I tried to fix it by giving the grow (flex item) inner element a width by using relative and absolute positions, but then I got a corrupt layout. The corruption is related that the element's height doesn't take in account to all its child elements.

Note: the inner element inside the flex grow item is built with several div tags.

Here is the jsFiddle.

.cols {
  display: flex;
}

.flex--0 {
  flex: 0 0 auto;
}

.flex--1 {
  flex: 1 1 auto;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.width--100 {
  width: 100%;
}

.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.border {
  border: 1px solid gray;
}

<h1>Ellipsis inside Flex item</h1>

<h2>Working fine in Chrome Not working in FF and IE</h2>

<div class="cols border">
  <div class="flex--0 border padding--sm">Icon</div>
  <div class="flex--1 border padding--sm">
    <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>
    <div>Icon</div>
    <div>Icon</div>
    <div>Icon</div>
  </div>
</div>

<div>Second BLOCK</div>

<h2>Trying to fix in FF and IE (Layout corrupts)</h2>
<div class="cols border">
  <div class="flex--0 border padding--sm">Icon</div>
  <div class="flex--1 relative border padding--sm">
    <div class="absolute width--100">
      <div class="ellipsis">Icon lkdjasdoif dlkjasdfo;isd fasldf ;asofj as;doifja dflkas d;laiksjdf oaisjdf asldkfj a;slkfdj as;oifj as;ldkfj asldkfjowiejfa;wlkdfj as;lkdjf as;lkdfj a;osifj aw;lkefj asldkfj ;aolifj aw;oiefjasl;dkfj a;slkdfj aodfj aw;lfjk as;lkdfj a;oiwefjr</div>
      <div>Icon</div>
      <div>Icon</div>
      <div>Icon</div>
    </div>
  </div>
</div>

<div>Second BLOCK</div>

Directoire

Answer 1

You can add min-width: 0; to the flex item.

.flex--1 {
  flex: 1 1 auto;
  min-width: 0;
}

jsFiddle

Or add overflow: hidden; to it.

.flex--1 {
  flex: 1 1 auto;
  overflow: hidden; /*or auto*/
}

jsFiddle

---

Why?

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.

---

Alternatively, you can wrap the content into a container.

.container {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

jsFiddle

Coddle

Thanks. It indeed working in IE and FF. Can you explain why it need this kind of workaround? I would expected to work at first place.... – Directoire

Ran into this when updating to chrome 48. This workaround seems to have fixed it. Many thanks. – Flocky

The solution using a wrapper with display: table, table-layout: fixed and explicit width was the only thing that worked for me with various levels of nested divs with display: flex and display: grid. It allowed me to keep the changes localized to where I wanted to render an element with ellipsis. Also note: width: fit-content works even better than width: 100%. It allows the flex child to stay at it's preferred size, but will shrink it (and render the ellipsis) if there is not enough space otherwise. – Walterwalters