Can't get the dots to show in a nested flex control

Question

As shown in this fiddle, the first cell has no room and gets cut off. However, I lack the ellipsis there.

When I googled the issue, I've got the suggestion that I might want to add overflow:hidden to the parent component. So I did. To every component. To to use whatsoever.

div.data-row {
  display: flex;
  width: 100%;
  overflow: hidden;
}

div.data-row-cell {
  display: flex;
  overflow: hidden;
}

div.data-row-caption {
  text-align: left;
  flex: 1;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

What am I missing?!

please pay attention to the use of tags .. *flex* isn't *flexbox* — Temani Afif, Apr 03 '19 at 19:21
as a side note, the issue is not related to nested flexbox, your issue is related to the last flexbox container whataver the number of nesting we have. — Temani Afif, Apr 03 '19 at 19:23
I meant that the nesting isn't causing the issue, you will still have the issue even with a single flex container (like in the duplicate question) — Temani Afif, Apr 03 '19 at 19:27
@TemaniAfif I always thought that *flex* was just a shorthand for *flexbox*. Isn't it? — Konrad Viltersten, Apr 03 '19 at 19:33
no, StackOverflow is not only about HTML/CSS, it's about programming in all the languages, so *flex* refer to something else .. simply hover in the tag when you add it to read the description of it. — Temani Afif, Apr 03 '19 at 20:09
Well I'll be darned. Thank you for educating me. At work, we're doing mostly MS/Win stuff so I believe that we developed a sub-lingo where flex refers to CSS. Nevertheless, your remark is generally correct and I do appreciate being set straight. — Konrad Viltersten, Apr 03 '19 at 22:28

score 3 · Accepted Answer · edited Apr 03 '19 at 19:31

3

I was able to get the ellipsis working by adding an additional element inside the flex child and setting the ellipsis styles on that element.

div.data-row-caption {
  text-align: left;
  flex: 1;
  overflow: hidden;
}

div.data-row-caption>span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="data-row-cell data-row-caption">
  <span>{{caption that is really long}}</span>
</div>
<div class="data-row-cell data-row-value">{{data}}</div>

edited Apr 03 '19 at 19:31

Konrad Viltersten

36,151
76
250
438

answered Apr 03 '19 at 19:16

Andy Hoffman

18,436
4
42
61

2

Awesome. I took the liberty to short down your example to point out the most relevant part of the change. It's going (hopefully) to be easier for the next reader to see the actual golden spot. +1 too! – Konrad Viltersten Apr 03 '19 at 19:31

Can't get the dots to show in a nested flex control

1 Answers1