Sticky footer with Flexbox

<body class="main">
    <header>This is the header</header>
    <div class="content" contenteditable="true">Text here</div>
    <footer>Footer here!</footer>
</body>

html, body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}
.main {
    background-color: #99CCFF;
    color: #fff;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
header, footer {
    display: flex;
    width: 100vw;
    box-sizing: border-box;
}
header {
    padding: 20px;
    background-color: #FFCC99;
}
.content {
    padding: 20px;
    flex: 1;
    box-sizing: border-box;
}
footer {
    padding: 20px;
    background-color: #FFCC99;
}