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

我正在使用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本身拉伸以包含其内容,以便显示特定于元素的滚动条,而不是视口的滚动条？

解决方法

添加这个：

#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 FF33.x Flexbox behavior in FF34.x?中所述,FlexBox模块会更改min-height的初始值：

07001

To provide a more reasonable default minimum size for 07002,
this specification introduces a new 07003 value as the initial
value of the 07004 and 07005 properties defined in
CSS 2.1.

我还添加了flex：1 1 0因为flex：1变为flex：1 1 0％,但0％在列布局中Chrome上有问题.但是0效果很好.

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

解决方法

猜你在找的HTML相关文章