How to make cards scroll vertically

Question

What is the best way to create a vertical scroll when one card is stacked on top of another, similar to the example shown in the link below?

Link here

I've searched some information and examples but haven't found anything.

If anyone knows or has examples, please share.

Answer 1

use margin-top 'minus'px

.card_wrap{
  width:200px;
  height:400px;
  border:solid 1px black;
  padding:20px;
  box-sizing:border-box;
  overflow-y: scroll;
  background:beige;
}
.card_wrap .card{  
  background:pink;
  padding:1rem;
  width:100%;
  height:100px;  
  margin-top:-50px;
  box-shadow:inset 0 0 0 2px gray;
  border-radius:8px;
  box-sizing:border-box;
  cursor:pointer;
}
.card_wrap .card:hover{
  background:skyblue;
}
.card_wrap .card:hover + .card{
  margin-top:0;
}
.card_wrap .card:nth-of-type(1){
  margin-top:0;
]

<div class="card_wrap">
  <div class="card">card1</div>
  <div class="card">card2</div>
  <div class="card">card3</div>
  <div class="card">card4</div>
  <div class="card">card5</div>
  <div class="card">card6</div>
  <div class="card">card7</div>
  <div class="card">card8</div>
  <div class="card">card9</div>
  <div class="card">card10</div>
  <div class="card">card11</div>
  <div class="card">card12</div>
  <div class="card">card13</div>
  <div class="card">card14</div>
  <div class="card">card15</div>
  <div class="card">card16</div>
  <div class="card">card17</div>
  <div class="card">card18</div>
  <div class="card">card19</div>
  <div class="card">card20</div>
  <div class="card">card21</div>
  <div class="card">card22</div>
  <div class="card">card23</div>
  <div class="card">card24</div>
  <div class="card">card25</div>
  <div class="card">card26</div>
</div>