CSS Flexbox 布局中具有动态高度的滚动条

Question

假设我有一个如下所示的 Flexbox 布局。

我想让 #content div 占据所有可用空间，而不破坏滚动条的任何内容。我在#content 中尝试了

height: 100%

，但这将#navbar 推离了视口。我该怎么做才能使这项工作成功？有什么建议么？ 为了您的方便，我在这里链接了我的jsfiddle。

Answer 1

最简单的解决方案之一是

calc()

内容 div 的

flex-basis

：从

flex-basis

的高度减去

#navbar

的

#container

。

#content {
  flex-basis: calc(100vh - 30px);
}

片段：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

#navbar {
  background: red;
  flex-basis: 30px;
}

#main {
  background: #eee;
  flex-grow: 1;
  display: flex;
}

#left {
  background: blue;
  flex-grow: 2;
}

#middle {
  background: #777;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

#content {
  background: #aaa;
  flex-basis: calc(100vh - 30px);
  overflow: auto;
}

#right {
  background: green;
  flex-basis: 25px;
}

<div id="container">
  <div id="navbar"></div>
  <div id="main">
    <div id="left"></div>
    <div id="middle">
      <div id="content">
        <p>paragraph 1</p>
        <p>paragraph 2</p>
        <p>paragraph 3</p>
        <p>paragraph 4</p>
        <p>paragraph 5</p>
        <p>paragraph 6</p>
        <p>paragraph 7</p>
        <p>paragraph 8</p>
        <p>paragraph 9</p>
        <p>paragraph 10</p>
        <p>paragraph 11</p>
        <p>paragraph 12</p>
        <p>paragraph 13</p>
        <p>paragraph 14</p>
        <p>paragraph 15</p>
        <p>paragraph 16</p>
        <p>paragraph 17</p>
        <p>paragraph 18</p>
        <p>paragraph 19</p>
        <p>paragraph 20</p>
      </div>
    </div>
    <div id="right"></div>
  </div>
</div>