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

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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:

CodePudding user response：

In order to make that work, your article need a fixed height.

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%;
    /* for example */
    height: 200px;
    background-color: white;
    border: 0.5em;
}

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>