<!DOCTYPE html>
<html>
<head>
<link href="resources/flexbox.css" rel="stylesheet">
<style>
.container {
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
}

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

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

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

.flexbox {
    border: 5px solid pink;
    height: 100px;
    width: 100px;
}

.flexbox > div {
    overflow: auto;
    min-width: 0;
    min-height: 0;
}

.flexbox > div > div {
    width: 120px;
    height: 120px;
    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%);
    background: -moz-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%);
}

p {
    margin-bottom: 30px;
}
</style>
</head>
<body>
    <p>Scrollbars should work in all the flexboxes. Each row should be aligned
    to the same corner.</p>
</body>
<script>
var writingModes = ['vertical-rl', 'vertical-lr', 'horizontal-tb'];
var flexDirections = ['row', 'column', 'row-reverse', 'column-reverse'];
writingModes.forEach(function(writingMode) {
    flexDirections.forEach(function(flexDirection) {
        var containerClass = 'container ' + writingMode;
        var flexboxClass = 'flexbox ' + flexDirection;
        document.body.innerHTML +=
            "<div class='" + containerClass + "'>" +
            "<div class='" + flexboxClass + "'>" +
            "<div><div></div></div>" +
            "</div>" +
            "</div> ";
    });
    document.body.innerHTML += "<br>";
});
</script>
</html>