constrain inner div with text-overflow: ellipsis (or similar) without max-width

I have a flexbox row with multiple cells and the last cell (D4, lets say) will be of variying width (flex-grow: 1). This div will contain inside it, another div that has the actual text. Now, my problem is that the text is going far beyond the width of the parent div (D4). I tried adding text-overflow: ellipsis; and overflow: hidden, but without a fixed width, it naturally isn't working. What's the best way to tame this inner div please?

Here's a little mockup of what I'm trying to do - and in this snippet, I've constrained the parent div .menu to 500px, but, that's just for demonstration and my actual div is the width of the page. When the text is longer than the parent width, it extends beyond the page and adds scrollbars to the page, which is what I'm trying to avoid.

How can I achieve this please?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* 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 */
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->

You can add overflow: hidden; to .menu__item--description and remove display: flex; on the .menu__item--description div.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* 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;
  overflow: hidden;
}

.menu__item--description div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
}

<!-- language: lang-html -->

<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 id="tekstdiv">
      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>

<!-- end snippet -->

I have only changed a little. Added an overflow: hidden; and removed a display: flex;:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* converted from scss */
.menu {
  display: flex;
  border: 1px solid red;
}

.menu__item {
  border: 1px solid black;
  padding: 5px;
}

.menu__item--description {
  flex-grow: 1;
  overflow: hidden;
}

.menu__item--description div {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

<!-- language: lang-html -->

<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>

<!-- end snippet -->