text-overflow: ellipsis not working on nested flex container

Question

I'm aware of these posts:

No answer from there fixes the issue I have in the code snippet below. Here's the html tree:

parent flex column
- child flex row
  - label flex (so I can align text vertically)

The only way I could make it work is by making the label an inline-block, but I'd really like to keep the flex.

What I'd already done:

On the child:
- Set white-space: nowrap
- Set min-width: 0
- Set overflow: hidden
On the parent
- Set min-width: 0
Permutate the options above with flex-grow: 1 and max-width: 100%

.parent-container {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.item-container {
  border: 1px solid #ebf0ff;
  border-radius: 0.25rem;
  display: flex;
  flex-flow: row nowrap;
  height: 3.25rem;
  margin: 0.5rem 1rem;
  padding: 0.5rem 1rem;
}

.label {
  align-items: center;
  display: flex;
  flex-flow: row nowrap;
  font-family: sans-serif;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<!DOCTYPE HTML>

<html>
<body>
  <div class="parent-container">
    <div class="item-container">
      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
  </div>
</body>
</html>

To vertically align the text in my app. The code snippet is just an approximation. — Paul Razvan Berg, Nov 21 '19 at 01:12
Good discovery. There's no clear reason why ellipsis works only when `display: flex` is removed from `.label`. The two (oldest) answers below provide fixes, but don't address the problem. — Michael Benjamin, Nov 21 '19 at 02:22
@Michael_B -- Is it not the fact that _when_ `.label` has `display: flex` then its text node becomes an anonymous flex child, and as such also need e.g. `min-width: 0` to behave? ... and if so, this is a duplicate to the linked posts. — Asons, Nov 21 '19 at 08:18
@PaulRazvanBerg -- A note, no reason to add properties with their default values, e.g. `flex-flow: row nowrap;` and `align-items: stretch;` Both `row`/`nowrap` and `stretch` is a flex container's default. — Asons, Nov 21 '19 at 08:30
@Michael_B I guess this cover it: https://stackoverflow.com/a/55042003/8620333 — Temani Afif, Nov 21 '19 at 08:45
and never use flexbox as a container for text, this a bad practise and once you add links or styling tags like `strong` everything will get scrambled, related: https://stackoverflow.com/a/54903923/8620333 — Temani Afif, Nov 21 '19 at 08:48
Many thanks for your help LGSon & Temani, you elucidated the mystery. Re default values - I prefer to be specific about my flex definitions, precisely because I know it's s a powerful tool with a lot of blackbox magic under the good. — Paul Razvan Berg, Nov 21 '19 at 12:43
@LGSon, in my testing, I wrapped the text in a `span` element, thus eliminating the anonymous item factor. It still didn't work with `min-width: 0`. That's why I posted my comment. I don't believe this post is a duplicate of those posted. — Michael Benjamin, Nov 21 '19 at 16:04
@Michael_B -- I hope you added/kept `min-width: 0` on the `.label` as well, as it is also a _flex child_, and when done like that it works just fine when text is wrapped. ... like in this fiddle: https://jsfiddle.net/yjvfnuhc/ — Asons, Nov 21 '19 at 16:27
@LGSon, LOL! That was exactly the problem. [This omission got me again!](https://stackoverflow.com/a/57143124/3597276) One day I'll learn to keep the min-width override on all flex containers. Thanks. — Michael Benjamin, Nov 21 '19 at 17:48

score 0 · Answer 1 · answered Nov 21 '19 at 01:13

.parent-container {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.item-container {
  border: 1px solid #ebf0ff;
  border-radius: 0.25rem;
  display: flex;
  flex-flow: row nowrap;
  height: 3.25rem;
  margin: 0.5rem 1rem;
  padding: 0.5rem 1rem;
}

.label {
  align-items: center;
  font-family: sans-serif;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<!DOCTYPE HTML>

<html>
<body>
  <div class="parent-container">
    <div class="item-container">
      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
  </div>
</body>
</html>

Remove:

display: flex;
  flex-flow: row nowrap;

If you want it vertically aligned, add this to .label:

  margin-top: auto;
  margin-bottom: auto;

Amazing, these tricks for `margin` saved the day! But I'm curious why this isn't possible with flexbox. Is it just that in the set up I described above, the content size is at least the maximum width (for reasons I don't fully grasp yet)? — Paul Razvan Berg, Nov 21 '19 at 01:17
It's all a bit mysterious, but there are strange overflow results when nesting `flexbox`'s.. so let's attribute it to that. Have a read about another [weird overflow issue](https://moduscreate.com/blog/how-to-fix-overflow-issues-in-css-flex-layouts/) with `flexbox` - expect the unexpected and be cautious when nesting `flexbox` — EGC, Nov 21 '19 at 01:20

score 0 · Accepted Answer · answered Nov 21 '19 at 01:14

You need to remove flex for .label and to align, use align-items: center; for its parent.

.parent-container {
  align-items: stretch;
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
}

.item-container {
  border: 1px solid #ebf0ff;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  flex-flow: row nowrap;
  height: 3.25rem;
  margin: 0.5rem 1rem;
  padding: 0.5rem 1rem;
}

.label {
  flex-flow: row nowrap;
  font-family: sans-serif;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<!DOCTYPE HTML>

<html>

<body>
  <div class="parent-container">
    <div class="item-container">
      <span class="label">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
    </div>
  </div>
</body>

</html>

Thanks, it worked! I'm curious why this isn't possible with flexbox. Is it just that in the code snippet above, the content size is at least the maximum width (for reasons I don't fully grasp yet)? — Paul Razvan Berg, Nov 21 '19 at 01:20
the workaround using `min-wdith` is for flex child elements and not the flex parent. Your child element had a flex declaration which was not needed. — Nidhin Joseph, Nov 21 '19 at 01:30

text-overflow: ellipsis not working on nested flex container

2 Answers2