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

Question

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

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

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

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;
}

<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>

但是,请注意边栏并没有单独滚动.而是整个视口扩展和滚动.有趣的是,我想要实现的是没有嵌套的正常工作 - 如果我删除导航栏,侧边栏会独立滚动.

如何阻止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因为如何在FF 34.x中获得FF 33.x Flexbox行为中的说明？,Flexbox模块更改初始值min-height:

4.5隐含的最小Flex项目大小

为了为flex项提供更合理的默认最小大小,此规范引入了一个新的自动值作为CSS 2.1中定义的min-width和min-height属性的初始值.

我也添加了flex: 1 1 0因为flex: 1变成了flex: 1 1 0%,但是0%在列布局中Chrome上有错误.但0效果很好.