Why nested element in CSS grid item is not scrollable?

Question

Consider the following code:

nav{
  background-color: red;
  width: 150vw;
  height: 50px;
}

section{
  overflow: auto;
}

main{
  display: grid;
}

<main>
  <div>
    <section>
      <nav></nav>
    </section>
  </div>
</main>

I want to do the section element scrollable. If I don't set display: grid in the main element, the section element is scrollable.

Same result, if I set overflow: auto for the div or main elements.

Why is that?

EDIT: Notice that I want to keep the original nav size, and make it scrollable (instead of making the whole page scrollable)