horizontal scroll in css code example
Example 1: horizontal scroll html
<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>
.scrolling-wrapper {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
.card {
display: inline-block;
}
}
Example 2: css horizontal scroll
.scroll{
overflow-x: scroll;
overflow-y: hidden;
height: 80px;
white-space:nowrap
}
Example 3: horizontal scroll
.scrolling-wrapper-flexbox { display: flex; flex-wrap: nowrap; overflow-x: auto; .card { flex: 0 0 auto; }}