So high main div

__vertical.css

.app {
    height: 100%;
  
    background: white;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    margin: auto;
}

.header {
    padding: 0px;
    margin: 0px;
    height: pt2px(59);
    flex-shrink: 1;
    background: white;
    border-bottom: 1px solid rgb(225,227,235);
}
/**
 * 1. IE9-11 do not support main el, so display: block is needed.
 * 2. IE10 sets flex-shrink to zero. This was originally according to spec, but has since changed. See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
 **/
.main {
    display: block; /* 1 */          
    flex-grow: 0;      
    flex-basis: 10000px;      
    flex-shrink: 100; /* 2 */
    background:  rgb(244, 245, 249);
    overflow: auto;
    padding: 0 0px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}
.footer {
    height: pt2px(22);
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-shrink: 1;
    background: rgba(255,255,255,0.9);
    border-top: 1px solid rgb(225,227,235);
}