Unlimited width CSS container

Unlimited width scrollable container using inline-block

by Brett

HTML

<div class="container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
</div>

SCSS

.container {
    box-sizing: border-box; // if you want the container to conform to viewport width
    width: 100%;
    min-height: 150px;
    font-size: 0; // removes 4px space between inline-block items
    white-space: nowrap;
    border: 4px solid red;
    overflow-x: auto;
    
	> div {
        display: inline-block;
        width: 25%;
        height: 150px;
        background: #ccc;
        font-size: initial; // resets font-size
		line-height: 150px;
		text-align: center;
        
		&:nth-of-type(even) {
            background: #ddd;
        }
    }
}