可滚动的柔韧儿童-成长1
我正在尝试创建一个可滚动的柔韧子，其高度由其flex属性决定。
示例：
.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;
}<body>
<div class="container">
<div class="heading">heading</div>
<div class="content">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
</div>
</div>
</body>
(https://jsfiddle.net/ymfL9owh/)
该布局由flex父.container和两个flex子元素组成：
.heading，它具有由padding和min-height定义的固定高度，以及.content，它应该占用.heading空间之后的所有剩余空间。为了达到这个目的，第一个弹性子(.heading)有flex: 0 0 auto，第二个弹性子(.content)有flex: 1 0 auto。
但是，我也希望.content内部有可滚动的内容。现在，我看到我能做到的唯一方法是强制.content有一个固定的高度(例如通过max-height，就像我在提供的示例中通过将它设置为40vh)。但是，虽然它使其可滚动，但它也打破了柔箱布局，其中content的高度是parent高度减去heading高度。
似乎一旦我指定了.content高度，它就不再尊重柔性盒的布局，这是有意义的。但是，在保持由柔性箱布局定义的高度的同时，是否还有其他方法使其可滚动？
回答 2
Stack Overflow用户
发布于 2019-05-11 18:47:40
height:100%需要计算父元素的已知height，除非元素是HTML本身。您需要：html, body, {height:100%}所以.container {height:100%}作为一个意思，height值将从HTML (浏览器的窗口)继承，然后由BODY继承，最后由.container继承。
也可以使用VH来代替%来简化它。
应该将.container设置为overflow:hidden，以允许子程序在达到父级的限制后滚动。
代码示例：
* {
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;
} <div class="container">
<div class="heading">heading</div>
<div class="content">
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box3</div>
</div>
</div>
Stack Overflow用户
发布于 2019-05-11 18:29:55
将min-height: 0放到.content类样式中，它应该可以按照您的预期工作。
https://stackoverflow.com/questions/56093138
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号