flex超出一行显示省略号无效

使用flex布局，左右两个元素，其中一个元素使用flex-grow: 1，希望这个元素内的文字超过一行显示省略号。

但是实际发现超出一行显示省略号无效。解决方法是设置width: 0就可以了。代码如下，为div设置一个width: 0就可以了。

<style>
.latest-comments li div {
    width: 0;
    flex-grow: 1;
    padding-left: 0.75rem;
}
</style>
<ul class="latest-comments">
                    <li>
                        <img src="/images/avatar.jpg" align="left">
                        <div>
                            <span>paulyu1988</span>
                            <p>
                                <a class="text-decoration-none text-body" href="/articles/1">超级长的内容超级长的内容超级长的内容超级长的内容超级长的内容超级长的内容</a>
                            </p>
                        </div>
                    </li>
</ul>

运行效果：