HTML horizontal scrollbar for card divs

user_3870464 0
Viewed 20621

I want to implement a horizontal scroll bar for card classes as shown in this example. I have tried with overflow-x:scroll but didn't get lucky. Can anyone please suggest how can I implement a scroll bar such that the cards flow horizontally ? Thanks

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
}

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

.card-text {
  font-size: 85%;
}
<div class="container">
  <div class="row">
    <div class="card">
      <img src="http://placehold.it/200x150">
      <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="http://placehold.it/200x150">
      <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="http://placehold.it/200x150">
      <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="http://placehold.it/200x150">
      <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>

css html
5 Answers

Using FlexBox it's very easier to make horizontal scroll bar. When parent is display: flex; then float will have no effect in child element. Check the snippet how it work.

.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>

user_36041880

Modify your .row class by adding these properties or create a new class if you don't want to tamper .row class.

.row {
  display: flex;
  overflow-x: scroll;
}

For more on Flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

I added the above properties as inline styles to the HTML snippet <div class="row" style="display: flex; overflow-x: scroll">

.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
}

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

.card-text {
  font-size: 85%;
}
<div class="container">
  <div class="row" style="display: flex; overflow-x: scroll">
    <div class="card">
      <img src="http://placehold.it/200x150">
      <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="http://placehold.it/200x150">
      <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="http://placehold.it/200x150">
      <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="http://placehold.it/200x150">
      <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>

user_47241670

I have added .card-wrap class to wrap card and added css:

.card-wrap {
  overflow-x: scroll;
  display: flex;
}


.card {
  float: left;
  width: 33.333%;
  padding: .75rem;
  margin-bottom: 2rem;
  border: 0;
}
.card > img {
  margin-bottom: .75rem;
}
.card-text {
  font-size: 85%;
}
.card-wrap {
  overflow-x: scroll;
  display: flex;
}
<div class="container">
  <div class="row">
    <div class="card-wrap">
      <div class="card">
        <img src="http://placehold.it/200x150">
        <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="http://placehold.it/200x150">
        <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="http://placehold.it/200x150">
        <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="http://placehold.it/200x150">
        <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>
</div>

user_80243540

I have Modify my code .overlay-content class and added css of .overlay-content also

<!-- language: lang-html -->

<div class="container">
    <div class="row">
    <div class="overlay-content">
    <div class="card">
        <img src = "http://placehold.it/200x150" >
        < 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 = "http://placehold.it/200x200" >
        < 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 = "http://placehold.it/200x200" >
        < 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 = "http://placehold.it/200x200" >
        < 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>
</div>

<!-- end snippet -->
user_90136510

I tried to do it in its simplest form, it can be further improved by making various additions. The next designs are up to our imagination.

.main {
    border: 1px solid lightgray;
    padding: 1vw;
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

li {
    scroll-snap-align: center;
    display: inline-block;
    height: 80vh;
    min-width: 90vw;
    border-radius: 5px;
    font-size: 0;
    margin-right: 10vw;
    background-color: aquamarine;
}
<ul class="main">
    <li></li>
    <li></li>
    <li></li>
</ul>

user_130528160
Related