如何创建具有滚动内容的 100% 宽度和高度 Flex 容器答案

【问题标题】：How to create a 100% width and height Flex container with scrolling content如何创建具有滚动内容的 100% 宽度和高度 Flex 容器
【发布时间】：2021-08-26 14:27:53
【问题描述】：

我想要实现的布局是经典的页眉 + 侧边栏 + 内容 + 页脚，flex 填充整个屏幕。

我不明白该怎么做是让侧边栏内容填满屏幕空间（不是 html 页面而是屏幕），如果它的内容比容器高，让它滚动。

这里是示例代码

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.side {
  display: flex;
  flex-direction: column;
  background-color: lime;
}

.row-wrapper {
  flex-grow: 1;
  display: flex;
  background-color: orange;
  flex-direction: row;
}

.footer {
  height: 40px;
  background-color: purple;
}

.col-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: lightgreen;
}

.header {
  background-color: yellow;
}

.content {
  flex-grow: 1;
  background-color: gold;
}

<div class="wrapper">
  <div class="row-wrapper">
    <div class="side"> side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>
    </div>
    <div class="col-wrapper">
      <div class="header">
        header
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
  <div class="footer">
    footer
  </div>
</div>

查看侧边栏中的内容如何推动其高度，从而使整个页面滚动而不是仅侧边栏。内容也是如此。

【问题讨论】：

你可以使用GRID。使用网格布局要容易得多。
是的，我可以，但我不想这样做。无论如何，谢谢你的提示。

标签： css layout scroll flexbox overflow

【解决方案1】：

只需添加 3 行即可完成此操作：

max-height: 100vh; 到 .wrapper 以确保它不会溢出视口
overflow: auto; 到 .side 使其可滚动
min-height: 0; 到 .row-wrapper 以防止其拉伸 (read more in another answer)

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* added */
  max-height: 100vh;
}

.side {
  display: flex;
  flex-direction: column;
  background-color: lime;
  /* added */
  overflow: auto;
}

.row-wrapper {
  flex-grow: 1;
  display: flex;
  background-color: orange;
  flex-direction: row;
  /* added */
  min-height: 0;
}

.footer {
  height: 40px;
  background-color: purple;
}

.col-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: lightgreen;
}

.header {
  background-color: yellow;
}

.content {
  flex-grow: 1;
  background-color: gold;
}

<div class="wrapper">
  <div class="row-wrapper">
    <div class="side"> side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>side<br/>
    </div>
    <div class="col-wrapper">
      <div class="header">
        header
      </div>
      <div class="content">
        content
      </div>
    </div>
  </div>
  <div class="footer">
    footer
  </div>
</div>

【讨论】：