Html 使用flexbox将div保持在视口内

我正在处理一个页面，该页面有一个页眉、两个侧栏、一个内容区域和一个内容区域的页脚。是否可以使用flexbox将内容区域和页脚保持在视口内，以便仅滚动内容区域（页脚固定在底部）

以下是我试图实现的一个示例：

注意页面是如何滚动的。我所寻找的只是蓝色区域的滚动（黄色的页脚总是在视图中）。我仍然希望保持窗口的灵活性，并希望在没有javascript的情况下实现这一点

HTML:

这行吗

以下是我补充的内容：

body, html { overflow: hidden; }
.header {
  position: absolute;
  top: 0px;
}
.center {
  position: relative;
  top: 50px;
  height: 100vh;
}
.settings {
  position: fixed; //sticky footer
  bottom: 0;
  width: 80%; //whatever width it needs to be
}

---

这不是很好，但以此为基础，找到了一个可行的解决方案：谢谢！这是另一个版本。比以前更干净。不过我还是希望不用定义页脚高度。美好的看起来很干净

body, html {
  margin: 0;
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  display: flex;
  flex-grow: 1;
}

p {
  margin: 0;
  padding: 1em 0;
  display: block;
  color: #fff;
  box-sizing: border-box;
}

.wrapper {
  background: blue;
  flex-grow: 1;
  flex-direction: column;
}

.header {
  background: red;
  min-height: 50px;
  flex-grow: 0;
  width: 100%;
  padding: 1em;
  box-sizing: border-box;
}

.left-sidebar, .right-sidebar {
  background: green;
  width: 100px;
  flex-grow: 0;
  padding: 1em;
    box-sizing: border-box;
}

.center {
  flex-direction: column;
  overflow: auto;
}

.settings {
  background: yellow;
  flex-grow: 0;
  min-height: 30px;
  padding: 1em;
  box-sizing: border-box;
}

.work-area {
  flex-direction: column;
}

body, html { overflow: hidden; }
.header {
  position: absolute;
  top: 0px;
}
.center {
  position: relative;
  top: 50px;
  height: 100vh;
}
.settings {
  position: fixed; //sticky footer
  bottom: 0;
  width: 80%; //whatever width it needs to be
}