社区首页 >问答首页 >当视图调整大小时，如何强制嵌套的flexbox元素收缩和显示滚动条？

问当视图调整大小时，如何强制嵌套的flexbox元素收缩和显示滚动条？
EN

Stack Overflow用户

提问于 2015-08-06 15:18:18

回答 1查看 6.8K关注 0票数 9

我正在使用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>

但是，请注意，侧栏不单独滚动。相反，整个视口展开并滚动。有趣的是，我想要实现的东西在没有嵌套的情况下正常工作--如果我删除导航条，侧边栏就会独立滚动。

如何防止柔性盒本身拉伸以包含其内容，以便显示特定于元素的滚动条，而不是视图的滚动条？

html

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-06 16:00:43

添加以下内容：

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