Double scroll inside an area using css grid layout when bowser change its dimensions -

i'm trying find reason why code generates scroll inside container when change browser size. , you'll see, i'm not code.

here code , question:

/*  grid  */    body {      margin:0;      display: grid;      grid-template-columns: repeat(1, 1fr);            grid-template-areas:          "introduction"          "projects"          "footer"      ;  }  .introduction {      grid-area: introduction;      background: #ececec;      height: 100vh;  }    .projects {      grid-area: projects;      background: #ececec;  }  .piepagina {      grid-area: footer;      background: #ececec;  }    /*  introduction area  */    .introduction {      display: grid;      grid-template-columns: 25% 1fr;      padding: 0 0 0 100px;  }    .intro h1 {      border-left: 6px solid orange;      padding-left: 6px;      margin-top: 65px;  }  .lastproj {background-color: rgba(255, 0, 0, 0.3); }    /*  main area  */    .projects {      display: grid;      grid-gap: 8px;      grid-template-columns: repeat(auto-fill,minmax(320px, 1fr));      grid-auto-rows: 320px;      padding: 8px 100px;      height: 100vh;      overflow: auto;  }  .projects article {      background: #373341;  }  footer {      background: yellow;  }

<div class="introduction">    <div class="intro">      <h1>title</h1>      <p>some text</p>    </div>    <div class="lastproj">      images here    </div>  </div>    <main id="portfolio" class="projects">    <article>1</article>    <article>2</article>    <article>3</article>    <article>4</article>    <article>5</article>    <article>6</article>    <article>7</article>    <article>8</article>    <article>9</article>    <article>10</article>  </main>    <footer class="piepagina">© copyright 2017</footer>

if don't use overflow in main, footer not going @ end in bottom part of web.

why content in main don't grow pushing footer , shows double scroll bar?. in case css grid, keep footer @ bottom?

thanks