Why does grandchild of flex container overflow?

Question

I have a flex container with a fixed width. It contains an intermediate container which contains a child that overflows.

Why does overflow on the child not work? If I delete the intermediate container it works as expected.

.container {
  display: flex;
  border: 1px dashed red;
  max-width: 300px;
/*   WORKS */
/*   overflow-x: hidden; */
}

.container2 {
    border: 1px solid green;
/*   WORKS */
/*   overflow-x: hidden; */
}

.child {
  font-size: 2rem;
  background: lightgrey;
/*   DOESN'T WORK! */
/*   overflow-x: hidden; */
}

<div class="container">
  <div class="container2">
      <div class="child">Superlongsuperlongsuperlongsuperlong</div>
  </div>
</div>

Try deleting .container2 from the markup. Suddenly, overflow-x within .child works again. Why?