我有一个具有多个单元格的Flexbox行，最后一个单元格(假设是D4)的宽度是可变的(flex-grow: 1).该div将在其中包含另一个具有实际文本的div.现在，我的问题是文本远远超出了父div(D4)的宽度.我试着添加text-overflow: ellipsis;和overflow: hidden，但没有固定的width，它自然不起作用.请问驯服这种内心世界的最好方法是什么？
这是我正在try 做的一个小模型--在这个片段中，我将父div限制为.menu到500px，但这只是为了演示，我的实际div是页面的宽度.当文本比父宽度长时，它会延伸到页面之外，并向页面添加滚动条，这是我试图避免的.
请问我怎样才能做到这一点呢？
/* converted from scss */
.menu {
display: flex;
border: 1px solid red;
width: 500px;
}
.menu__item {
border: 1px solid black;
padding: 5px;
}
.menu__item--description {
flex-grow: 1;
}
.menu__item--description div {
display: flex;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
max-width: 100%; /* doesn't work */
}<div class="menu">
<div class="menu__item">One</div>
<div class="menu__item">Two</div>
<div class="menu__item">Three</div>
<div class="menu__item menu__item--description">
<div>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system
</div>
</div>
</div>