Nested divs with flexDirection: column; show vertical scroll bar on inner div

Question

I have such setup which works fine:

function App() {
  return (
    <div
      style={{
        display: "flex",
        height: "100%",
        flexDirection: "column"
      }}
    >
      <div style={{ height: 50 }}>results</div>
      <div
        style={{
          flex: 1,
          background: "gray",
          display: "flex",
          flexDirection: "column"
        }}
      />
    </div>
  );
}

Here is screenshot:

You can see grey rectangle correctly calculated vertical flex.

As you can see I also plan to put some content inside gray div, hence display:flex and flexDirection:column inside.

Now look at this code:

function App() {
  return (
    <div
      style={{
        display: "flex",
        height: "100%",
        flexDirection: "column"
      }}
    >
      <div style={{ height: 50 }}>results</div>
      <div
        style={{
          flex: 1,
          background: "gray",
          display: "flex",
          flexDirection: "column"
        }}
      >
        <div style={{ height: 100 }} />
        <div style={{ flex: 1, overflow: "auto" }}>
          {/* Just generates 1000 divs */}
          {new Array(1000).fill(null).map(x => (
            <div>test</div>
          ))}
        </div>
      </div>
    </div>
  );
}

My goal was as you can see that a vertical scrollbar appears when the content overflows the div with green border, but instead the vertical scrollbar appears on the main page as seen on this screenshot:

How to achieve that vertical scrollbar is shown on the div with green border, using such setup?