Scrollable flex child with flex-grow 1
我正在尝试创建一个可滚动的flex-child,其高度由其flex-grow属性
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | .container { display: flex; flex-direction: column; height: 100%; } .heading { background: #9D8189; flex: 0 0 auto; padding: 2rem; min-height: 10rem; } .content { background: #FFE5D9; flex: 1 0 auto; padding: 2rem; /* Makes it scrollable but breaks the flexbox layout */ max-height: 40vh; overflow: scroll; } .box { background: #D8E2DC; padding: 7rem; } |
1 2 3 4 5 6 7 8 9 10 | <body> heading box1 box2 box3 </body> |
(jsfiddle)
布局由flex-parent
-
.heading ,具有由padding 和min-height 定义的固定高度,并且 -
.content 应该占据.heading 后的所有剩余空间。为此,第一个flex-child(.heading )具有flex: 0 0 auto ,第二个flex-child(.content )具有flex: 1 0 auto 。
但是,我也希望
似乎一旦我指定了
您需要:
也可以使用
代码示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | * { box-sizing: border-box; padding: 0; margin: 0; } .container { display: flex; flex-direction: column; height: 100vh;/* update */ overflow:hidden;/* update */ } .heading { background: #9D8189; /*flex: 0 0 auto; */ padding: 2rem; min-height: 10rem;/* if needed */ } .content { background: #FFE5D9; flex: 1 ;/* make it simple */ padding: 2rem; overflow: auto;/* scroll if needed */ } .box { background: #D8E2DC; padding: 7rem; } |
1 2 3 4 5 6 | heading box1 box2 box3 box3 |
将