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

2 votes114 views1 answer
Css square image
CSS
20 votes102 views3 answers
Css text selection none
CSS
5 votes107 views3 answers
Css box shadow not on bottom
CSS
37 votes108 views6 answers
Add gradient to text css
CSS
1 vote118 views2 answers
How to lighten the color of text in html
CSS
16 votes105 views3 answers
Remove underline hover css
CSS
162 votes157 views5 answers
Css shaddow
CSS
36 votes102 views5 answers
Text-color gradient css
CSS
0 vote133 views1 answer
Cl image tag width
CSS
0 vote104 views1 answer
How to make a text in center with background color in css
CSS