Horizontal gallery without explicit container width

dabblet.css

/**
 * Horizontal gallery without explicit container width
 * made with inline-block and box (flex) values for display properties
 */
 
.super-container {
	width: 50%;
	overflow-x: auto;
}

.container {
	white-space: nowrap;
}

.box {
	display: inline-block;
	height: 300px;
	margin: 0 3px; /* because the 2 pixel issue with inline-block */
	background-color: rgba(255,0,0,0.3);
}

.container-flex-old {
	display: box;
}

.container-flex-old .box {
	display: block;
	margin: 0 5px;
}

.container-flex {
	display: -webkit-flex;
}

.container-flex .box{
	display: block;
	margin: 0 5px;
}

._1 {
	width: 100%;
	min-width: 50%;
}
._2 {
	width: 200px;
}
._3 {
	width: 400px;
}
._4 {
	width: 300px;
}
._5 {
	width: 500px;
}

dabblet.html

<h3>inline-block Syntax</h3>
<div class="super-container">
	<div class="container">
		<div class="_1 box"></div>
		<div class="_2 box"></div>
		<div class="_3 box"></div>
		<div class="_4 box"></div>
		<div class="_5 box"></div>
	</div>
</div>

<h3>Old Flexbox Syntax</h3>
<div class="super-container">
	<div class="container-flex-old">
		<div class="_1 box"></div>
		<div class="_2 box"></div>
		<div class="_3 box"></div>
		<div class="_4 box"></div>
		<div class="_5 box"></div>
	</div>
</div>

<h3>New Flexbox Syntax</h3>
<div class="super-container">
	<div class="container-flex">
		<div class="_1 box"></div>
		<div class="_2 box"></div>
		<div class="_3 box"></div>
		<div class="_4 box"></div>
		<div class="_5 box"></div>
	</div>
</div>

</div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}