Flex in Flex

by Gregg Tavares

HTML

<div id="outer">
        <div id="top">
            top
        </div>
        <div id="bottom">
            <div id="bottomcontents">
                <div id="botleft">
                    bottom left
                </div>
                <div id="botright">
                    bottom right
                </div>
            </div>
        </div>
    </div>

CSS

* {
        box-sizing: border-box;
       -moz-box-sizing: border-box;   
    }
    
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
      border: 0px;
    }
    
    #outer {
        height: 100%;
        border: 5px solid red;
        display: flex;
        display: -webkit-flex;
        flex-flow: column;
        -webkit-flex-flow: column;
        justify-content: center;
        align-content: center;
        align-items: center;
        -webkit-justify-content: center;
        -webkit-align-content: center;
        -webkit-align-items: center;
        min-height: auto;    
    }
    #top {
        width: 100%;
        flex: 0 1 auto;
        -webkit-flex: 0 1 auto;
        border: 5px solid blue;
    }
    #bottom {
        width: 100%;
        height: 100%;
        flex: 1 1 auto;
        -webkit-flex: 1 1 auto;
        border: 5px solid green;
    }
    #bottomcontents {
        height: 100%;
        width: 100%;
        border: 5px solid pink;
        display: flex;
        display: -webkit-flex;
        flex-flow: row;
        -webkit-flex-flow: row;
        justify-content: space-between;
        align-content: center;
        align-items: flex-end;
        -webkit-justify-content: space-between;
        -webkit-align-content: center;
        -webkit-align-items: flex-end;
        min-height: auto;        
    }
    
    #botleft, #botright {
       
      flex: 0 1 auto;
      -webkit-flex: 0 1 auto;
    }
    #botleft {
        border: 5px solid purple;
    }
    #botright {
        border: 5px solid cyan;
    }