Problem while scrolling an article element in HTML5

Question

I am trying to implement a vertical scroll in an article element using html5 but it is not working as I want. Instead of maintaining a fixed dimension if I add p elements it increments article`s heigth. I post here the code and the result.

/*Especificidad 003*/

body section article {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-start: 1;
  grid-column-end: 6;
  overflow-y: scroll;
  padding: 5%;
  margin: 5%;
  background-color: white;
  border: 0.5em;
}


/*Especificidad 004*/

body section article p {
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-column-start: 1;
  grid-column-end: 6;
}

<section>
  <h1>Calculadora RPN</h1>
  <article>
    <h2>Contenido de la pila</h2>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
    <p>Prueba</p>
  </article>
</section>

The result is this one, the heigth should be much more smaller and the scroll should work but it does not:

For example if I only add 3 elements it is waht happens: