使用省略号使flexbox中的文本溢出

Question

如何使flexbox中的文本带有省略号？我可以通过将文本包装在另一个div中来实现目标。有办法避免包装纸吗？

.flex {
  display: flex;
  width: 50px;
  height: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

<ul>
  <li class="flex">
    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  </li>
</ul>