Core Code
Core Code Modern Dev Handbook

CSS Horizontal Scroll Container

Horizontal scrolling containers are common for galleries.

Preview

Code

<style>
.container{
display:flex;
overflow-x:auto;
gap:10px;
width:220px;
}

.item{
min-width:80px;
height:60px;
background:#e0f2fe;
display:flex;
align-items:center;
justify-content:center;
}
</style>

<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

More CSS Overflow Examples (7)

example CSS Overflow Visible open example example CSS Overflow Hidden open example example CSS Overflow Scroll open example example CSS Overflow Auto open example example CSS Overflow X open example example CSS Overflow Y open example example CSS Overflow Text Clip open example