我有正在调整大小的内容，并且我想要一个固定标题，该标题不会增大/缩小，并且不属于可滚动内容的一部分。如果空间不足，下面的内容将变得可滚动。
内容外包装（flexGrowWrapper) has a flex-grow: 1内包装有height: 100%; overflow-y: auto。这里的思考过程是flexGrowWrapper将填充内的任何剩余空间resizediv，内部包装器将占据整个高度flexGrowWrapper如果有溢出，它应该滚动。
正在发生的事情是flexGrowWrapper确实增长到填满resize区域，但似乎它的内容决定了它的最小高度。
我怎样才能使flexGrowWrapper永远不要超越resize面积高度？
$("button").click(function() {
$(".resize").toggleClass("small");
});
.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}
<button>
Resize
</button>
<div class="resize">
<div class="heading">
<label>Some heading that wont scroll</label>
</div>
<div class="flexGrowWrapper">
<div class="wrapper">
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
注：我看了这个类似的问题 https://stackoverflow.com/questions/21515042/scrolling-a-flexbox-with-overflowing-content，但似乎有一些差异，我无法找到适合我的解决方案。
Add min-height: 0 to .flexGrowWrapper- 请参阅下面的演示：
$("button").click(function() {
$(".resize").toggleClass("small");
});
.resize {
height: 200px;
display: flex;
flex-direction: column;
overflow-y: hidden;
width: 300px;
}
.resize.small {
height: 100px;
}
.heading {
flex: 0 0 auto;
}
.flexGrowWrapper {
border: 2px solid red;
flex-grow: 1;
min-height: 0; /* ADDED */
}
.wrapper {
height: 100%;
overflow-y: auto;
}
.content {
display: flex;
flex-direction: row;
clear: both;
}
<button>
Resize
</button>
<div class="resize">
<div class="heading">
<label>Some heading that wont scroll</label>
</div>
<div class="flexGrowWrapper">
<div class="wrapper">
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
<div class="content">
content
</div>
</div>
</div>
</div>
<div>
Something else here
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
为什么这有效
请注意，这是因为对于列弹性盒默认值min-height值为auto（沿着柔性轴）。您可以在下面看到此行为的一些示例：
- Flexbox 影响溢出换行行为 https://stackoverflow.com/questions/52277368/flexbox-affects-overflow-wrap-behavior/52278099#52278099
- 为什么弹性项目不会缩小到超过内容大小？ https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
