text-overflow ellipsis on flex child not working [duplicate]

Answer 1

That's because class .el doesn't have a width set. Use the CSS below and it works well:

.el {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 3em;
}