Flexbox调整大小并滚动可溢出 [英] Flexbox resize and scrollable overflow
问题描述
我有正在调整大小的内容，并且我想要一个固定的标题，该标题不会增长/缩小，也不属于可滚动内容.如果没有足够的空间，则下面的内容将变为可滚动.
I have content that I am resizing, and I want to have a fixed heading that doesn't grow/shrink and is not part of the scrollable content. With the content below becoming scrollable if there is not enough space.
内容外包装(flexGrowWrapper)具有flex-grow: 1，内包装具有height: 100%; overflow-y: auto.这里的思想过程是flexGrowWrapper将填充resize div中的所有剩余空间，然后内部包装将占据flexGrowWrapper的整个高度，如果有溢出，则应滚动.
The content outer wrapper (flexGrowWrapper) has a flex-grow: 1 and the inner wrapper has height: 100%; overflow-y: auto. The thought process here is that flexGrowWrapper will fill up any remaining space within the resize div, the inner wrapper will then take the full height of the flexGrowWrapper and if there is overflow, it should scroll.
正在发生的事情是flexGrowWrapper确实会增长以填充resize区域，但是似乎它的内容指示着它的最小高度.
What is happening is that flexGrowWrapper does grow to fill the resize area, but it seems that it's content is dictating it's min-height.
如何使flexGrowWrapper永远不会超过resize区域高度?
How can I make flexGrowWrapper never go beyond the resize area height?
$("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>
注意:我看了这个类似的问题，但似乎会有一些差异，但我无法找到适合我的解决方案.
Note: I looked at the this similar question, but it seems to have some differences, and I couldn't get the solutions to work for me.
推荐答案
将min-height: 0添加到.flexGrowWrapper-请参见以下演示:
Add min-height: 0 to .flexGrowWrapper - see demo below:
$("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轴).您可以在下面看到这种行为的一些示例:
Note that this is because for a column flexbox the default min-height value is auto (along the flex axis). You can see some examples of this behaviour below:
- Flexbox affects overflow-wrap behavior
- Why don't flex items shrink past content size?
这篇关于Flexbox调整大小并滚动可溢出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
