CSS Flexbox Layout

jsdoit.css

@import "compass/reset";

li {
	list-style: none;
}

$sideSize: 125px;

body, html {
    height: 100%;
}

#container {
    height: 100%;
    display: -webkit-flex;
    -webkit-flex-flow: column;
}


#menuBar {
    padding: 5px;
    -webkit-flex: 0;
    display: -webkit-flex;
    -webkit-flex-flow: row;
    background-color:#999;
    
    > div {
        -webkit-align-self: center;
        -webkit-flex: 1;
        text-align:center;
    }
    
    div:first-child {
         text-align:left;
    }
	div:last-child {
         text-align:right;
    }
    
}
    
#controlBar {
    padding: 15px 5px;
     -webkit-flex: 0;
    background-color:#b0b0b0;
    
    #title {
    	text-align:center;
        color:#fff;
        font-weight:bold;
    }
        
	#controlBox {
        display: -webkit-flex;
        
        div:first-child {
              -webkit-flex: $sideSize;  
        }
            
        > div {
                -webkit-flex: 1;
                -webkit-align-self: center;
        }
                        
		#controlBtns {
             > p {
                   display:inline-block;
             }
       }
    }
}

#content {
     -webkit-flex: 1;
    display: -webkit-flex;
    -webkit-flex-flow: row;
    
    #sideBar {
        padding: 5px;
        -webkit-flex: $sideSize 0 0;
        background-color: #f0f0f0;
                            
        #compose {
             text-align:center;
             margin-bottom: 15px;
        }
                            
         li {
         	padding: 5px;
         }
    }
    #mainPanel {
        padding: 5px;
        -webkit-flex: 1;
        background-color: #c0c0c0;
    }
}

jsdoit.html

<div id="container">
    <div id="menuBar">
    	<h1 id="logo">Logo</h1>
    	<div class="searchBox"><input type="search" id="q" name="q"></div>
    	<div class="accountbox">Account Name</div>
    </div>
    <div id="controlBar">
    	<div id="controlBox">
            <div id="title"><p><span>Title</span></p></div>
            <div id="controlBtns">            
                <p><input type="button" value="check" /></p>
                <p><input type="button" value="reload" /></p>
                <p><input type="button" value="more" /></p>
            </div>
    	</div>
    </div>
    <div id="content">
        <div id="sideBar">
            <div id="compose"><input type="button" value="Compose" id="btnCompose"></div>
            <div class="listLabel">
                <li>list item1</li>
                <li>list item2</li>
                <li>list item3</li>
                <li>list item4</li>
                <li>list item5</li>
            </div>
        </div>
        <div id="mainPanel">Main Panel</div>
    </div>
</div>