是什么导致省略号不显示在CSS中？

Question

是什么导致省略号不显示，隐藏的溢出似乎起作用，但为什么没有省略号？

.outer{
    background-color:red;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-right: 32px;
    margin-left: 16px;
    width:200px;
}

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

<div class="outer">
  <div class="inner">Long long long text, foo bar baz bin<div/>
<div/>