How to shrink a child to fit the outer-most flex-container in a deep hierarchy?

Question

I am trying to hide overflow in a label that is the child of a deeply nested flex-container. Below are two simple snippets to illustrate the problem:

Single container (works):

#parent-flexbox {
  display: flex;
  width: 200px;
}

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

<div id="parent-flexbox">
  <label>long text that should be hidden because it is wider than the parent container</label>
</div>

Nested container (doesn't work):

#parent-flexbox {
  width: 200px;
}

#parent-flexbox, #child-flexbox {
  display: flex;
}

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

<div id="parent-flexbox">
  <div id="child-flexbox">
    <label>long text that should be hidden because it is wider than the parent container</label>
  </div>
</div>

To solve this I could add an explicit width like max-width: 100% to every container in the hierarchy. This is a terrible solution that I'm hoping is unnecessary! My current best fitting solution, but not much better, is these two rules for the immediate parent of the label: {position: absolute; max-width: 100%}. I want to avoid using absolute position because this comes with problems of its own. This JSFiddle shows the absolute position solution (lines outcommented default).

How can I achieve the same as this JSFiddle without A) using position: absolute and B) targetting all containers in the hierachy to give them max-width: 100% or min-width: 0?

see also https://stackoverflow.com/questions/49516916/having-a-flex-content-confined-inside-its-parent marked as a duplicate too for the same issue (simpliest is to add min-width:0; to the flex container ;) ) else overlow:hidden on the flex container — G-Cyrillus, Mar 30 '18 at 19:17
@G-Cyr For my question I specially ask if it is possible to avoid targetting all containers. I have read all those posts and they have not been helpful in this regard. — user2651804, Mar 30 '18 at 19:29
target only the flex parent with overflow or min-width, else avoid the flex display if behavior is not fitting your needs :( . Sorry not to come up with an unexpected trick ;) your answer is below or in the duplicate if you stick to the flex display — G-Cyrillus, Mar 30 '18 at 19:38

score 3 · Answer 1 · answered Mar 30 '18 at 19:13

3

The issue here is that the nested container is overflowing the first container and that's why overflow hidden is not working as you expect since there is no overflow with label.

I added border so you can better see:

#parent-flexbox {
  width: 200px;
}

#parent-flexbox, #child-flexbox {
  display: flex;
  border:1px solid green;
}

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

<div id="parent-flexbox">
  <div id="child-flexbox">
    <label>long text that should be hidden because it is wider than the parent container</label>
  </div>
</div>

To avoid this you may apply overflow:hidden to the containers:

#parent-flexbox {
  width: 200px;
}

#parent-flexbox, #child-flexbox {
  display: flex;
  overflow: hidden;
}

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

<div id="parent-flexbox">
  <div id="child-flexbox">
    <label>long text that should be hidden because it is wider than the parent container</label>
  </div>
</div>

I don't think you can fix this without targeting the containers. And since your are applying display:flex to all of them, you can add another property with it.

answered Mar 30 '18 at 19:13

Temani Afif

245,468
26
309
415

I have tried this indeed. The problem is 1) the nested container still overflows the outermost.. this in itself isn't really a problem since it is hidden. But it leads to 2) the label text-overflow isn't applied.. (no ellipsis displaying) – user2651804 Mar 30 '18 at 19:21
@user2651804 there is ellipsis for me in the snippet, you don't see it ? – Temani Afif Mar 30 '18 at 19:22
Oh, I didn't fully evaluate the answer, sorry! I was afraid to hear that I had to apply rules to all of the containers :( If I'm going there any way, wouldn't for instance `min-width: 0` be preferred to `overflow: hidden` ? – user2651804 Mar 30 '18 at 19:25
1

@user2651804 i would say both are almost the same in your situation ... i considered overflow here because you said you don't want min-width but at the end i added that in all the cases you have to target all the containers with one of the property ... so i provided another way and i don't think there is a way you can do without targeting nested container – Temani Afif Mar 30 '18 at 19:29

How to shrink a child to fit the outer-most flex-container in a deep hierarchy?

1 Answers1