* {
    margin: 2px;
}


body {
    display: flex;
    flex-direction: column;
/*    height: 100%;
    width: 100%;*/
}

.flex-main {
    /* 2. to push sidenav and sidebar to sides added below */
    display: flex;
    /* 3. to grow main content vertically set flex below to 1 */
    flex: 1;
}

.flex-article {
    /* 4. to grow main content horizontally 3x bigger than sides and shrink
3x more than sides set below */
    flex: 3 3;
}

.iframe {

}

/* 5. causes content to stack up once browser width goes below 540px */
@media all and (max-width: 990px) {
    .container {
        flex-direction: column;
    }
}