Amos N. Amos N. - 5 months ago 22
CSS Question

Ellipsis inside Flex item

I have a layout based on flexbox. Two columns, one fixed size and the second need to take all space.

In the grow column I have a string that I want it to be ellipsis.

In Chrome it works fine.
In IE and FF its not working.

I tried to fix it in IE and FF by giving the grow (flex item) inner element a width by using relative and absolute but then I got a corrupt layout.

The corruption is related that the element height don't take in account all its sons.

Note: the inner element inside the Flex grow item is build from several div tags.

Here is my code. Available here as well: http://jsfiddle.net/amosnesher/ztc9454w/



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

<br />

<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 corrupt)</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





Thanks in advance.

Answer

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

Comments