Understanding behaviour of overflow scroll inside nested flexbox

Question

<div class="container" style="display: flex; flex-direction: column; height: 30vh; background: yellow">
  <div>Heading1</div>
  <div style="flex-grow: 1; display: flex; flex-direction: column;">
    <div style="display: flex; flex-direction: column">

      <div>Heading2</div>
      <div class="scroll-container" style="flex-grow: 1; overflow: auto;">
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
        <div>scroll me</div>
      </div>

    </div>
  </div>
  <div>

I have a nested flexbox structure in above code. I want to put scroll on div.scroll-container, so I put overflow:auto and flex-grow: 1 on it. But I am getting an overflow instead.

I want to understand why is this happening and why no scroll is there despite overlfow: auto.