关于如何防止 flex child 生长的信息太多,但很难找出如何防止 flex PARENT 生长(因为 child)。
考虑以下布局:
- 外部元素的高度和宽度是固定的(可能用于原生应用)
- 页眉和页脚既不增长也不收缩。此外,页脚始终位于底部。
- 主要内容(在页眉和页脚之间)占据所有可用空间。
- 主要内容没有滚动。
- 但是内部元素可以滚动。例如部分标题下方的 ScrollView :
初步解决方案:
.layout {
display: flex;
flex-direction: column;
width: 640px;
height: 300px;
background: rgba(220, 20, 60, 0.2);
}
.header {
flex: 0 0 auto;
padding: 4px 8px;
background: rgba(220, 20, 60, 0.2);
}
.content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 4px 8px;
background: rgba(255, 69, 0, 0.2);
overflow-y: hidden;
}
.title {
flex: 0 0 auto;
background: rgba(255, 255, 0, 0.2);
}
.splitView {
display: flex;
flex: 1 1 auto;
background: rgba(0, 128, 128, 0.2);
overflow-y: hidden;
}
.splitView-section {
display: flex;
flex-direction: column;
flex: 1 1 50%;
}
.splitView-section:first-child {
background: rgba(0, 191, 255, 0.2);
}
.splitView-section:last-child {
background: rgba(0, 0, 255, 0.2);
}
.scrollView {
flex: 1 1 auto;
background: rgba(165, 42, 42, 0.2);
overflow-y: auto;
}
.veryBigElement {
background: #CD5C5C;
width: 50px;
height: 500px;
box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px
}
.footer {
flex: 0 0 auto;
padding: 4px 8px;
background: rgba(173, 255, 47, 0.2);
}
<div class="layout">
<div class="header">I am header</div>
<div class="content">
<div class="title">Title</div>
<div class="splitView">
<div class="splitView-section">
<div class="sectionTitle">Section title</div>
<div class="scrollView">
<div class="veryBigElement"></div>
</div>
</div>
<div class="splitView-section"></div>
</div>
</div>
<div class="footer">I am footer</div>
</div>
- 外部元素的高度和宽度是固定的:例如让它是
width: 640px
和height: 300px;
。< - 页眉和页脚不会变大也不会缩小。
flex: 0 0 auto
用于页眉和页脚。 - 主要内容(在页眉和页脚之间)占用所有可用空间。
flex: 1 1 auto
。 - 此外,页脚始终位于底部。页脚不需要
margin-top: auto
,因为它会被主要内容压到底部。 - 主要内容没有滚动。默认情况下不会。
- 但内部元素可以滚动。
overflow-y: auto
用于 ScrollView 。
它有效。但是有一个问题:如果我们添加一些带有阴影的元素(例如卡片 ScrollView ),因为 overflow-y: hidden
for .splitView
和 。 content
,我们不会看到它的部分。例如如果为 .veryBigElement
添加 box-shadow: rgba(black, 0.25) 0 0 6px
,我们只看到:
因此,根据设计,可能不会使用上述解决方案。如果我们从 .splitView
和 .content
中删除 overflow-y: hidden
,splitView-section
将增长,无论overflow-y: auto
用于 .scrollView
。
请注意:
- 我们不知道页眉的高度和页脚的高度(假设它的内容是动态的)。
- 我们无法计算
.scrollView
的高度,甚至splitView
的高度:在实际应用中它可能是很多内容而不是'.title'。
JSFiddle:https://jsfiddle.net/teyqkrh8/
最佳答案
您可以删除“overflow-y: hidden”并为 .splitView 和 -section 添加“height: 100%”。
.splitView{
display: flex
flex: 1 1 auto
background: rgba(#008080, 0.2)
height: 100%
&-section{
display: flex
flex-direction: column
flex: 1 1 50%
height: 100%
}
}
由于设置了父 div 的高度,因此子 div 将继承该高度。
关于html - 防止 flex PARENT 无溢出地增长 : hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56831355/