LayoutTests/css3/flexbox/flexbox-overflow-auto.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
 <style>
 .test-row {
     display: -webkit-flex;
     margin-bottom: 5px;
 }
 .test-row > div {
     -webkit-flex: none;
 }

 .container {
     margin-right: 5px;
     border: 5px solid lightgreen;
     width: 100px;
 }

 .horizontal-tb {
     -webkit-writing-mode: horizontal-tb;
 }

 .horizontal-bt {
     -webkit-writing-mode: horizontal-bt;
 }

 .vertical-rl {
     -webkit-writing-mode: vertical-rl;
 }

 .vertical-lr {
     -webkit-writing-mode: vertical-lr;
 }

 .row {
     -webkit-flex-direction: row;
 }

 .row-reverse {
     -webkit-flex-direction: row-reverse;
 }

 .column {
     -webkit-flex-direction: column;
 }

 .column-reverse {
     -webkit-flex-direction: column-reverse;
 }

 .flexbox {
     border: 0 solid pink;
     display: -webkit-flex;
     height: 100px;
     width: 100px;
     overflow: auto;
 }

 .flexbox > div {
     width: 200px;
     height: 200px;
     background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
     -webkit-flex: none;
 }

 </style>
 </head>
 <body>
     <p>Scrollbars should work in all the flexboxes.</p>
 </body>
 <script>
 var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
 var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
 var testContents = '';
 writingModes.forEach(function(writingMode) {
     testContents += "<div class='test-row'>";
     flexDirections.forEach(function(flexDirection) {
         var containerClass = 'container ' + writingMode;
         var flexboxClass = 'flexbox ' + flexDirection;
         testContents +=
             "<div class='" + containerClass + "'>" +
             "<div class='" + flexboxClass + "'>" +
             "<div></div>" +
             "</div>" +
             "</div>";
     });
     testContents += "</div>";
 });

 document.body.innerHTML += testContents;

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	.test-row {
	display: -webkit-flex;
	margin-bottom: 5px;
	}
	.test-row > div {
	-webkit-flex: none;
	}

	.container {
	margin-right: 5px;
	border: 5px solid lightgreen;
	width: 100px;
	}

	.horizontal-tb {
	-webkit-writing-mode: horizontal-tb;
	}

	.horizontal-bt {
	-webkit-writing-mode: horizontal-bt;
	}

	.vertical-rl {
	-webkit-writing-mode: vertical-rl;
	}

	.vertical-lr {
	-webkit-writing-mode: vertical-lr;
	}

	.row {
	-webkit-flex-direction: row;
	}

	.row-reverse {
	-webkit-flex-direction: row-reverse;
	}

	.column {
	-webkit-flex-direction: column;
	}

	.column-reverse {
	-webkit-flex-direction: column-reverse;
	}

	.flexbox {
	border: 0 solid pink;
	display: -webkit-flex;
	height: 100px;
	width: 100px;
	overflow: auto;
	}

	.flexbox > div {
	width: 200px;
	height: 200px;
	background: -webkit-radial-gradient(center, ellipse cover, rgba(30,87,153,1) 0%,rgba(89,148,202,1) 62%,rgba(95,154,207,0.7) 68%,rgba(125,185,232,0) 100%);
	-webkit-flex: none;
	}

	</style>
	</head>
	<body>
	<p>Scrollbars should work in all the flexboxes.</p>
	</body>
	<script>
	var writingModes = ['horizontal-tb', 'horizontal-bt', 'vertical-rl', 'vertical-lr'];
	var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
	var testContents = '';
	writingModes.forEach(function(writingMode) {
	testContents += "<div class='test-row'>";
	flexDirections.forEach(function(flexDirection) {
	var containerClass = 'container ' + writingMode;
	var flexboxClass = 'flexbox ' + flexDirection;
	testContents +=
	"<div class='" + containerClass + "'>" +
	"<div class='" + flexboxClass + "'>" +
	"<div></div>" +
	"</div>" +
	"</div>";
	});
	testContents += "</div>";
	});

	document.body.innerHTML += testContents;

	</script>
	</body>
	</html>