在 HTML5 中滚动文章元素时出现问题

Question

我正在尝试使用 html5 在文章元素中实现垂直滚动，但它没有按我的意愿工作。如果我添加

，而不是保持固定尺寸

元素增加文章的高度。 我在这里发布代码和结果。

/*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>

结果是这个，高度应该小得多，滚动应该可以工作，但它不能：

例如，如果我只添加 3 个元素，那就会发生：

Answer 1

为了做到这一点，您的文章需要一个固定的高度。

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;
}