这个问题在这里已有答案:
我有内容我正在调整大小,我希望有一个不会增长/缩小的固定标题,而不是可滚动内容的一部分。如果没有足够的空间,下面的内容可以滚动。
内容外包装(flexGrowWrapper
)有一个flex-grow: 1
,内包装有height: 100%; overflow-y: auto
。这里的思考过程是flexGrowWrapper
将填充resize
div中的任何剩余空间,然后内包装将占据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>
注意:我查看了this similar question,但它似乎有一些差异,我无法让解决方案适合我。
将min-height: 0
添加到.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>
为什么会这样
请注意,这是因为对于列flexbox,默认的min-height
值是auto
(沿着flex轴)。您可以在下面看到此行为的一些示例: