Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<html>
<head>
<style>
.test-row {
display: flex;
margin-bottom: 5px;
}
.test-row > div {
flex: none;
}
.container {
margin-right: 5px;
border: 5px solid lightgreen;
width: 100px;
}
.flexbox {
display: block;
height: 100px;
width: 100px;
overflow: auto;
}
.flexbox > div {
width: 200px;
height: 200px;
background: radial-gradient(at right 60%, red, yellow, green);
}
.vertical-rl {
writing-mode: vertical-rl;
}
</style>
</head>
<body>
<p>Scrollbars should work in all the flexboxes.</p>
</body>
<script>
var results = [
'left top', 'left top', 'right top', 'left bottom',
'right top', 'right top', 'right bottom', 'left top',
'left top', 'left top', 'left bottom', 'right top'];
var testContents = '';
for (var i = 0; i < results.length; ++i) {
if (!(i % 4))
testContents += "<div class='test-row'>";
var containerClass = 'container ' + results[i];
// Use vertical-rl here because Firefox and WebKit put vertical scrollbars
// on the left in the vertical-rl test cases, and this is the easiest way to
// match that.
let maybe_vertical = "";
if (i > 3 && i < 8)
maybe_vertical = " vertical-rl";
testContents +=
"<div class='" + containerClass + "'>" +
"<div class='flexbox" + maybe_vertical + "'>" +
"<div></div>" +
"</div>" +
"</div>";
if (i % 4 == 3)
testContents += "</div>";
}
document.body.innerHTML += testContents;
Array.prototype.forEach.call(document.querySelectorAll(".left"), function(element) {
element.firstChild.scrollLeft = -1000;
});
Array.prototype.forEach.call(document.querySelectorAll(".right"), function(element) {
element.firstChild.scrollLeft = 1000;
});
Array.prototype.forEach.call(document.querySelectorAll(".bottom"), function(element) {
element.firstChild.scrollTop = 1000;
});
</script>
</body>
</html>