chihung
2/26/2020 - 11:34 AM

How To Create Horizontal Scrolling Containers

css.scss
content_copyfile_download
.scrolling-wrapper-flexbox {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;

  .card {
    flex: 0 0 auto;
  }
}
html.html
content_copyfile_download
<div class="scrolling-wrapper">
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
  <div class="card"><h2>Card</h2></div>
</div>