How to make cards scroll vertically – Html

let topc = 30
Array.from(document.querySelector('.cards').children).forEach(c => {
  hue = Math.floor(Math.random() * 256)
  c.style.backgroundColor = 'hsl(' + hue + ', 50%, 50%)'
  c.style.top = topc + 'px'
  topc += 50
})

.cards {
  font-family: sans-serif;
  font-size: 20px;
  color: white;
}
.cards>div {
  padding: 10px;
  border-radius: 10px;
  position: absolute;
  width: 300px;
  box-shadow: 0 -2px 5px rgb(0,0,0,0.5);
}

<div class="cards">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id quam eu ipsum viverra gravida.</div>
  <div>Nunc feugiat hendrerit leo, at finibus purus efficitur et. Sed vel semper libero.</div>
  <div>Pellentesque feugiat, tortor sollicitudin tristique elementum, diam lacus mattis libero, eu tincidunt purus ligula nec magna.</div>
  <div>Sed at vulputate enim, ut rutrum nulla. Curabitur fermentum a dolor et cursus.</div>
  <div>Nunc eleifend nec sem ac suscipit. Curabitur ut viverra mi. Nam lacinia sem lacus.</div>
  <div>Integer aliquet ipsum in eros molestie maximus. Praesent erat lacus, suscipit ut rutrum eu, consequat eget ex.</div>
  <div>tMaecenas interdum nunc vitae risus euismod gravida. Pellentesque ultrices pharetra malesuada.he</div>
  <div>Pellentesque lacus magna, hendrerit mollis odio in, volutpat consectetur elit. Nulla facilisi.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id quam eu ipsum viverra gravida.</div>
  <div>Nunc feugiat hendrerit leo, at finibus purus efficitur et. Sed vel semper libero.</div>
  <div>Pellentesque feugiat, tortor sollicitudin tristique elementum, diam lacus mattis libero, eu tincidunt purus ligula nec magna.</div>
  <div>Sed at vulputate enim, ut rutrum nulla. Curabitur fermentum a dolor et cursus.</div>
  <div>Nunc eleifend nec sem ac suscipit. Curabitur ut viverra mi. Nam lacinia sem lacus.</div>
  <div>Integer aliquet ipsum in eros molestie maximus. Praesent erat lacus, suscipit ut rutrum eu, consequat eget ex.</div>
  <div>tMaecenas interdum nunc vitae risus euismod gravida. Pellentesque ultrices pharetra malesuada.he</div>
  <div>Pellentesque lacus magna, hendrerit mollis odio in, volutpat consectetur elit. Nulla facilisi.</div>
</div>