Taldakus Taldakus - 21 days ago 7
CSS Question

Flex item filled with text overflowing flex container

I am facing almost the same problem as in this question:



And this solution works perfectly:



.container {
display: -webkit-flex;
}

.container>div:first-child{
white-space:nowrap;
-webkit-order:1;
-webkit-flex: 1;
-webkit-flex: 0 1 auto; /*important*/
text-overflow: ellipsis;
overflow:hidden;
min-width:0px; /* new algorithm mises the calculation of the width */
}

.container > div:last-child {
-webkit-flex: 1;
-webkit-order:2;
background: red;
-webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
white-space:normal;
}

<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>

<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div>
<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>

<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div><div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>





(jsFiddle version)

But if I put the presented div in a div with
display: flex
, my problem comes back.

Here is the full code which does not work. The problem is exactly the same as in the above question.



.container {
display: flex;
}

.container>div:first-child{
white-space:nowrap;
-webkit-order:1;
-webkit-flex: 1;
-webkit-flex: 0 1 auto; /*important*/
text-overflow: ellipsis;
overflow:hidden;
min-width:0px; /* new algorithm mises the calculation of the width */
}

.container > div:last-child {
-webkit-flex: 1;
-webkit-order:2;
background: red;
-webkit-flex:1 0 auto; /*important*/
}


.test-flex {
display: flex;
}

<div class="test-flex">
<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div>
</div>




Answer

... if I put the presented div in a div with display: flex, my problem comes back. ... The problem is exactly the same as in the above question.

The solution is also the same as in that question: Add min-width: 0 to the flex item.

As described in the accepted answer to that question, a flex item by default cannot be smaller than the size of its content.

Now that you've created a new primary container (.test-flex), you've made the previous primary container (.container) a flex item.

You now need to override the default setting on flex items (min-width: auto) to allow .container to shrink past the size of its children (the divs with the text).

You can do that with:

  • min-width: 0, or
  • overflow: hidden

.container {
  display: flex;
  min-width: 0;  /* NEW */
}
.container>div:first-child {
  white-space: nowrap;
  order: 1;
  flex: 0 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  min-width: 0px;
}
.container > div:last-child {
  order: 2;
  background: red;
  flex: 1 0 auto;
}
.test-flex {
  display: flex;
}
<div class="test-flex">
  <div class="container">
    <div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
    <div>foo bar</div>
  </div>
</div>

For more details see: Why doesn't flex item shrink past content size?