Css horizontal scroll cards

.row{
  align-items: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}
.card {
  /*float: left;*/
  max-width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
  flex-basis: 33.333%;
  flex-grow: 0;
  flex-shrink: 0;
}

.card > img {
  margin-bottom: .75rem;
  width: 100%;
}

.card-text {
  font-size: 85%;
}

<div class="container">
  <div class="row">
    <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
    <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
     <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
     <div class="card">
      <img src="https://picsum.photos/300/200">
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
    </div>
  </div>
</div>

Source: stackoverflow.com

Similar codes

1 vote200 views1 answer
Refresh css on page
CSS
7 votes177 views2 answers
How to make image same size as text css
CSS
0 vote203 views1 answer
How to hide text that is longer than its parent div
CSS
0 vote207 views1 answer
Display inline-block not working
CSS
6 votes213 views3 answers
Scroll snap css
CSS
0 vote190 views1 answer
Boxsizing
CSS
2 votes220 views2 answers
How to remove the blueish background on a button when clicked
CSS
2 votes213 views1 answer
Html5 input required length
CSS
3 votes187 views2 answers
Bootstrap.min.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
CSS
2 votes191 views6 answers
Neumorphism
CSS