Untitled

dabblet.css

.container {

height: 200px;
background: yellow;
display: flex;
flex-direction: column;
align-items: stretch;

}
.scroll {    
overflow-x: auto;    
width: 50%;    
border:1px #ccc solid;
flex: 1 0 auto;
display: flex;
}
.outer {    
background: cyan;
display: flex;    
flex: 1 0 auto;
flex-direction: row;
align-items: stretch;    
box-sizing: border-box;    
min-width: 100%;
padding: 20px;    
float: left; /* To size to content, & not be clamped to available width. (Vendor-prefixed intrinsic sizing keywords for "width" should work here, too.) */
}
.outer > div {    
flex: 1 1 auto;    
border: 1px #ccc solid;    
text-align: center;    
min-width: 50px;   
 margin: 5px;
 }

dabblet.html

<div class="container">
<div class="scroll">
	<div class="outer">
		<div>text1</div>
		<div>text2</div>
		<div>text3</div>
		<div>text4</div> 
		<div>text5</div>    
		<div>text6</div>    
		<div>text7</div>    
		<div>text8</div>    
		<div>text9</div>    
		<div>text10</div>  
	</div>
</div>
</div>

settings.json

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