Horizontally scrolling box

dabblet.css

/**
 * Horizontally scrolling box
 */

.scrollbox {
	/*overflow: hidden;*/
	display: block;
	outline: 1px solid red;
	padding: 0;
	margin: 0;
}

.scrollbox.horizontal {
	width: 220px;
	height: 340px;
}

.scrollbox.horizontal .scroller {
	display: inline-flex;
	padding: 0;
	margin: 0;
	outline: 1px solid green;
	height: 340px;
}

.scrollbox.horizontal .scrollelement {
	display: block;
	outline: 1px solid blue;
	margin: 10px;
	height: 320px;	
}

dabblet.html

<aside class="scrollbox horizontal imagecontainer" id="scrollbox1">
	<div class="scroller">
		<figure class="scrollelement">
			<img src="https://picsum.photos/200/300" alt="Zufallsbild nummer 1" />
			<figcaption>Bild 1</figcaption>
		</figure>
		<figure class="scrollelement">
			<img src="https://picsum.photos/200/300" alt="Zufallsbild nummer 2" />
			<figcaption>Noch ein Zufallsbild</figcaption>
		</figure>
		<figure class="scrollelement">
			<img src="https://picsum.photos/200/300" alt="Zufallsbild nummer 2" />
			<figcaption>Noch ein Zufallsbild</figcaption>
		</figure>	</div>
</aside>

dabblet.js

// alert('Hello world!');

settings.json

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