<!DOCTYPE html>
<html>
<style>
.flexbox {
    display: flex;
    background-color: #aaa;
    float: left;
}
.flexbox > div {
    margin: 2px 13px 8px 17px;
    flex: none;
}
.flexbox > div:not(.nested) {
    width: 10px;
    height: 15px;
}
.flexbox > .nested > div:not(.nested) {
    width: 20px;
    height: 30px;
}
.flexbox > .nested > .nested > div {
    width: 30px;
    height: 40px;
}

.flexbox > :nth-child(1) {
    background-color: blue;
}
.flexbox > :nth-child(2) {
    background-color: green;
}
.flexbox > div > :nth-child(1) {
    background-color: pink;
}
.flexbox > div > :nth-child(2) {
    background-color: purple;
}
.flexbox > div > div > :nth-child(1) {
    background-color: red;
}
.flexbox > div > div > :nth-child(2) {
    background-color: yellow;
}

.nested {
    display: flex;
    background-color: #ddd;
}
.horizontal-tb {
    writing-mode: horizontal-tb;
}
.vertical-lr {
    writing-mode: vertical-lr;
}
.column {
    flex-flow: column;
}
.clear {
    clear: both;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.flexbox')">

<div class="flexbox" data-expected-height=70  data-expect-width=90>
    <div class="column nested" data-expected-height=60  data-expect-width=20>
        <div></div>
        <div></div>
    </div>
    <div></div>
</div>
<br class=clear>

<div class="flexbox vertical-lr" data-expected-height=115  data-expect-width=80>
    <div class="horizontal-tb nested" data-expected-height=80  data-expect-width=50>
        <div class="vertical-lr nested" data-expected-height=80  data-expect-width=30>
            <div></div>
            <div></div>
        </div>
        <div></div>
    </div>
    <div></div>
</div>
<br class=clear>

<div class="flexbox vertical-lr" data-expected-height=65  data-expect-width=70>
    <div class="column nested" data-expected-height=30  data-expect-width=40>
        <div></div>
        <div></div>
    </div>
    <div></div>
</div>
<br class=clear>

<div class="flexbox vertical-lr" data-expected-height=65  data-expect-width=70>
    <div class="nested horizontal-tb" data-expected-height=30  data-expect-width=40>
        <div></div>
        <div></div>
    </div>
    <div></div>
</div>
<br class=clear>

<div class="flexbox" data-expected-height=70  data-expect-width=90>
    <div class="nested vertical-lr" data-expected-height=60  data-expect-width=20>
        <div></div>
        <div></div>
    </div>
    <div></div>
</div>
<br class=clear>

</body>
</html>