Flexbox: div is missing

Can somebody explain why the last is missing (X and Y) and how to solve the problem?

There should be 3 elements visible:

• a header (1, 2) which takes as much space as it needs
• a scrollable main part (X, X, ..) which takes all space which is available after header and footer have taken their space
• a footer (X, Y)

https://stackblitz.com/edit/web-platform-arwv4n?file=index.html

<div style="border: 2px solid #ffd1dc; overflow: hidden; height: 100%">
  <div style="display: flex; flex-direction: column; width: 100%; height: 100%">
    <div style="flex: 0 0 auto">
      <div>
        <p>1</p>
        <p>2</p>
      </div>
    </div>
    <div style="flex: 1 0 auto; height: 100%">
      <div
        style="display: flex; width: 100%; height: 100%; flex-direction: column"
      >
        <div
          style="
            display: flex;
            flex: 1 1 auto;
            overflow: auto;
            background-color: red;
            color: rgba(0, 0, 0, 0.87);
          "
        >
          <div
            style="
              flex: 1 1 auto;
              overflow: auto;
              background-color: red;
              color: rgba(0, 0, 0, 0.87);
            "
          >
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
            <p>x</p>
          </div>
        </div>
        <div style="flex: 0 0 auto; background-color: green">
          <p>1</p>
          <p>2</p>
        </div>
      </div>
    </div>
  </div>
</div>