Not able to setup a scrollable article inside my HTML page

user_14712559 0
Viewed 78

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: enter image description here

For example if I only add 3 elements it is waht happens: enter image description here

scroll css html
1 Answers

For this to work <article> needs to have a smaller height than its content's default height. You could simply use a fixed height along with scroll-y:auto or scroll-y:scroll. Like so:

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

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>

user_152886410
Related