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

概述我正在使用flexbox构建布局,整体而言相当简单.视图有三个部分：顶部的导航栏,左侧的侧边栏和填充剩余空间的内容区域.导航栏具有固定高度,侧栏具有固定宽度. 此外,侧边栏和内容区域应单独滚动.如果侧边栏中的内容溢出,则应创建特定于侧边栏的滚动条.内容视图也是如此.重要的是,这意味着整个视口必须永远不会滚动：它应该保持静态(只有元素应该滚动). 使用flexbox构建此布局非常简单： html, 我正在使用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 – 当视口调整大小时,如何强制嵌套的flexbox元素缩小并显示滚动条？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。