Use text-overflow: ellipsis and flexbox align-items: center in combination

Question

I've got a div, which is a wrapper, and some child div within. I'm using flexbox to position them below each other. Now, the child divs have a text. The text is aligned vertical with align-items: center;. The width of the child div depends of it's text. When the text is as long as the wrapper, the div should stop growing and the text within should got cut of. For this I tried to use text-overflow: ellipsis;. It doesn't work as expected. I know I could use display: inline-block; in case of flexbox, but I would like to use flexbox to align the text in combination with text-overflow: ellipsis; but it seems not to work with my example. At the moment, the item with long text overlaps the wrapper and there is also no ellipsis. The item has an fix height.

The only answer I found for this topic was this one, but the answer didn't help me: Ellipsis in flexbox container

Hope it's clear enough.

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
  flex-wrap: wrap;
}

.wrapper__item {
  min-width: 0;
  flex-basis: 50%;
  align-self: flex-start;
  flex-direction: row;
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: white;
  height: 50px;
}

<div class="wrapper">
  <div class="wrapper__item">Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</div>

  <div class="wrapper__item">Proin eget tortor ri.</div>

  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>

Answer 1

text-overflow: ellipsis won't work on flex container (display: flex).

The main reason is that the text node becomes a anonymous flex child and needs min-width: 0 to behave (or else it won't shrink beyond its content size), but as one can't target a text node with CSS, we need to wrap it, here done with a span.

Here's a post that have a great explanation for The Automatic Minimum Size of Flex Items

---

Note 1: The parent overflow is caused by the width + padding, and box-sizing: border-box will fix that.

Note 2: For the align-items: center to have an effect, the item need a height, here given 50px.

Stack snippet

.wrapper {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  padding: 10px;
}

.wrapper__item {
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 5px 10px;
  border: 1px solid black;
  border-radius: 5px;
  margin-bottom: 10px;
  background-color: white;
  height: 50px;
}
.wrapper__item span {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<div class="wrapper">
  <div class="wrapper__item"><span>Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec rutrum congue leo eget malesuada. Vivamus suscipit
    tortor eget felis porttitor volutpat. Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec rutrum congue leo eget malesuada. Curabitur arcu
    erat, accumsan id imperdiet et, porttitor at sem. Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Nulla porttitor accumsan tincidunt. Cras ultricies ligula sed magna dictum porta.</span></div>

  <div class="wrapper__item">Proin eget tortor ri.</div>

  <div class="wrapper__item">Proin eget tortor ri.Proin eget tortor ri.</div>
</div>