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

Question

我正在尝试使用 html5 在文章元素中实现垂直滚动，但它无法正常工作。如果我添加 p 元素，它不会保持固定尺寸，而是会增加文章的高度。我post这里是代码和结果。

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

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

Problem while scrolling an article element in HTML5

html

css

scroll