- flex + overflow
//css
.class-column {
display: flex;
overflow-x: scroll;
}
.class-column a {
flex: none;
width: 50vw;
height: 300px;
background: #ccc;
margin-right: 10px;
}
//html
<nav class="class-column">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</nav>
- white-space + inline-block
// css
.class-column {
overflow-x: scroll;
white-space: nowrap;
}
.class-column a {
display: inline-block;
width: 50vw;
height: 300px;
background: #ccc;
margin-right: 10px;
}
// html
<nav class="class-column">
<a href=""></a>
<a href=""></a>
<a href=""></a>
<a href=""></a>
</nav>
