Flex playground

by hhcofcmds

HTML

<div class="screen">
<div class="container">
    <div class="left">Leftside</div>
    <div class="top">top</div>
    <div class="content">content</div>
</div>
</div>

CSS

.screen {
    height: 600px;
}
.container {
    flex-flow: column wrap;
    display: flex;
    height: 100%;
    border: 1px dashed red;
}
.left, .top, .content {
    flex: 1 auto;
}
.left {
    order: 0;
    flex: 1 100%;
}

.top, .content {
    order: 1;
    flex: 1 auto;
    width: 100%;
}
.top {
    max-height: 50px;
}

.left {
    width: 100px;
}

.left {
    background: lightgreen;
}
.top {
    background: orange;
}
.content {
    border: 1px solid black;
}