当视口调整大小时，如何强制嵌套的flexbox元素缩小并显示滚动条？

Question

我使用flexbox构建布局，整体而言相当简单。视图有三个部分：顶部的导航栏，左侧的侧边栏和填充剩余空间的内容区域。导航栏具有固定的高度，侧栏具有固定的宽度。

此外，侧边栏和内容区域应单独滚动。如果侧边栏中的内容溢出，则应创建特定于侧边栏的滚动条。内容视图也是如此。重要的是，这意味着整个视口必须永远不会滚动：它应该保持静态（只有元素应该滚动）。

使用flexbox构建此布局非常简单：

＆＃13;

＆＃13;

html,
body {
  height: 100%;
  width: 100%;
}

body {
  margin: 0;
}

#root {
  display: flex;
  height: 100%;
}

#frame {
  display: flex;
  flex: 1;
  flex-direction: column;
}

#navigation-bar {
  background-color: #bab;
  display: flex;
  height: 70px;
  overflow: hidden;
}

#main {
  display: flex;
  flex: 1;
}

#left-bar {
  background-color: #aaa;
  overflow: auto;
  width: 250px;
}

#content {
  background-color: #ccc;
  flex: 1;
}

＆＃13;

<div id="root">
  <div id="frame">
    <div id="navigation-bar">
      <h1>Website Name</h1>
    </div>
    <div id="main">
      <div id="left-bar">
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
      </div>
      <div id="content">
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

但请注意，侧边栏不单独滚动。而是整个视口扩展和滚动。有趣的是，我试图实现的功能在没有嵌套的情况下正常工作 - 如果我删除导航栏，侧边栏会独立滚动。

如何阻止flexbox本身拉伸以包含其内容，以便显示特定于元素的滚动条，而不是视口的滚动条？

Answer 1

添加：

#main {
  min-height: 0;
  flex: 1 1 0;
}

html,
body {
  height: 100%;
  width: 100%;
}
body {
  margin: 0;
}
#root {
  display: flex;
  height: 100%;
}
#frame {
  display: flex;
  flex: 1;
  flex-direction: column;
}
#navigation-bar {
  background-color: #bab;
  display: flex;
  height: 70px;
  overflow: hidden;
}
#main {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
}
#left-bar {
  background-color: #aaa;
  overflow: auto;
  width: 250px;
}
#content {
  background-color: #ccc;
  flex: 1;
}

<div id="root">
  <div id="frame">
    <div id="navigation-bar">
      <h1>Website Name</h1>
    </div>
    <div id="main">
      <div id="left-bar">
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
        <h1>Some content</h1>
      </div>
      <div id="content"></div>
    </div>
  </div>
</div>

您需要min-height: 0，因为正如How can I get FF 33.x Flexbox behavior in FF 34.x?中所述，Flexbox模块会更改min-height的初始值：

  

4.5 Implied Minimum Size of Flex Items

     

为flex items提供更合理的默认最小尺寸，   本规范引入了一个新的auto值作为初始值   中定义的min-width和min-height属性的值   CSS 2.1。

我还添加了flex: 1 1 0，因为flex: 1变为flex: 1 1 0%，但0%在列布局中Chrome上存在错误。但0效果很好。