After auto prefixer

css_aftter_auto_prefixer.css

@import url('//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
body { 
    margin: 0; 
    font-family: 'Poppins';
    background-color: white;
}

.app {
    height: 100vh;
    background: rgb(244, 245, 249);
    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;
}

/**
 * Note that this demo will actually work fine in IE10. This is because in IE10, flex-shrink is 0 instead of 1.  See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
 **/
.header {
    height: 50px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    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 */
    -webkit-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
    -ms-flex-negative: 1;
        flex-shrink: 1; /* 2 */
    background:  rgb(244, 245, 249);
    overflow: auto;
    padding: 0 20px;
}

.footer {
    height: 50px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    background: rgba(255,255,255,0.9);
    border-top: 1px solid rgb(225,227,235);
}

h1 { font-size: 36px; }
p { font-size: 16px; }

css_before_auto_prefixer.css

@import url('//fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
body { 
    margin: 0; 
    font-family: 'Poppins';
    background-color: white;
}

.app {
    height: 100vh;
    background: rgb(244, 245, 249);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: auto;
}

/**
 * Note that this demo will actually work fine in IE10. This is because in IE10, flex-shrink is 0 instead of 1.  See: https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed
 **/
.header {
    height: 50px;
    flex-shrink: 0;
    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-shrink: 1; /* 2 */
    background:  rgb(244, 245, 249);
    overflow: auto;
    padding: 0 20px;
}

.footer {
    height: 50px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.9);
    border-top: 1px solid rgb(225,227,235);
}

h1 { font-size: 36px; }
p { font-size: 16px; }