i trying layout working, seems have issues when scale window smaller vertically. need sidebar panels have static-height headers , footers, , need able add 1-3 panels left or right sidebar , have them take entire space vertically without braking out of containers. proving difficult.
any tips appreciated!
here issue, when scale window smaller or larger panels (grey+white boxes) dont take full space, or take much. 
http://codepen.io/alexbezuska/pen/emqgwo?editors=110
.panel{ display: flex; flex-flow: column; //padding: 1em; overflow: hidden; } header { height: 32px; //must 32px background: #c0c0c0; } footer{ background: #cfcfcf; height: 32px; //must 32px } .select-list { //flex: 1; overflow-y: scroll; max-height:16vh; } .select-list-item { background: white; border: 1px solid black; height: 32px; //must 32px } //=============================================== body { display: flex; min-height: 100vh; max-height: 100vh; flex-direction: column; width: 100%; margin: 0 auto; } .layout-middle{ display: flex; flex: 1; } .layout-stage{ flex: 1 0 320px; background: #ffc94e; } .layout-left, .layout-right{ flex: 0 0 320px; background: #c9ea5d; } .layout-left{ background: #85d6e4; } .layout-header{ height: 100px; //must 100px background: #92e4c9; } .layout-footer{ height: 150px;//must 150px background: #f7846a; }
