html中box带滚动条,html – 当视口调整大小时,如何强制嵌套的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;

}

Website Name

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Some content

Some content

您需要min-height：0,因为如How can I get FF 33.x Flexbox behavior in FF 34.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效果很好.