<!DOCTYPE html>
<html>
<head>
<style>
.container {
    display: inline-block;
    vertical-align: top;
    margin-right: 30px;
    width: 100px;
    height: 100px;
    border: 5px solid pink;
    position: relative;
}

.container > div {
    overflow: auto;
    width: 100px;
    height: 100px;
}

.container > 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;
}

.topRight {
    direction: rtl;  /* place scrollbars on the LHS */
}
</style>
</head>
<body>
    <p>Scrollbars should work in all the flexboxes. Each row should be aligned
    to the same corner.</p>

    <div class="container topRight"><div><div></div></div></div>
    <div class="container topRight"><div><div></div></div></div>
    <div class="container topRight"><div><div></div></div></div>
    <div class="container topRight"><div><div></div></div></div>
    <br>
    <div class="container"><div><div></div></div></div>
    <div class="container"><div><div></div></div></div>
    <div class="container"><div><div></div></div></div>
    <div class="container"><div><div></div></div></div>
    <br>
    <div class="container"><div><div></div></div></div>
    <div class="container"><div><div></div></div></div>
    <div class="container"><div><div></div></div></div>
    <div class="container"><div><div></div></div></div>

<script>

Array.prototype.forEach.call(document.querySelectorAll('.bottomLeft'), function(element) {
    element.firstChild.scrollTop = 1000;
});

Array.prototype.forEach.call(document.querySelectorAll('.topRight'), function(element) {
    element.firstChild.scrollLeft = 1000;
});

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