text-overflow: ellipsis fails in flexbox

Issue

I've went through several posts about the similar situations, but most of them are complicated. I come up with a minimal case like this:

import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <div className="container">absdhkahdgoiqwhdklqhndkjqhdkhb</div>
      <div className="container flex">absdhkahdgoiqwhdklqhndkjqhdkhb</div>
    </div>
  );
}

.App {
  font-family: sans-serif;
  text-align: center;
}

.container {
  color: white;
  background-color: darkslategray;
  width: 100px;
  height: 100px;
  padding: 0 16px;
  margin: 20px auto;

  /* for ellipsis to work */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  /* center the text vertically using line height */
  line-height: 100px;
}

.flex {
  /*  center the text vertically using flex */
  display: flex;
  align-items: center;
  line-height: unset;
}

The codesandbox link is right here.

I think it's a smallest case that we can really focus on the side effect of flexbox. In above, the first div uses same line-height as the container's height to canter the text vertically, while the second div uses flexbox for the same alignment. Apparently, in the second one case, the ellipsis fails. I didn't find any convincing explains over this. Everyone who can explain the effect would get the point, thank you!

Solution

To make the ellipsis work you need to target the text not the container. Just wrap the text inside the .flex in span. And set same properties you set for .container

<div className="container flex">
  <span> absdhkahdgoiqwhdklqhndkjqhdkhb </span>
</div>

.flex span {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

Learn more about Why we need a span to wrap the text?

Original Explanation by @Michael Benjamin

Answered By - Kunal Tanwar