如何防止弹性项目高度因内容而溢出
How to prevent a flex item height to overflow due to it's content
我刚开始学习 flex,到目前为止给我留下了深刻的印象。但是,我遇到了包含 header/footer 和三列的整页应用程序的问题。
第一列包含一个项目列表,由于我无法为其父级设置固定高度,每次列表增长时,它都会将页脚向下推。
这是布局的代码笔:http://codepen.io/anon/pen/vNVQNj
Html :
<html>
<head>
<body>
<div class="app-wraper">
<div class="Navbar"></div>
<div class="main-content">
<div class="Bidlist">
<div class="column">
<div class="tabcontainer">
</div>
<div class="content-container">
<ul class="list-group instruments">
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</head>
</html>
CSS :
html,
body {
background-color: #212121;
overflow: hidden;
}
/* layout */
.app-wraper {
display: flex;
height: 100vh;
max-height: 100vh;
flex-direction: column;
justify-content: flex-start;
}
.Navbar {
height: 50px;
background-color: black;
margin-bottom: 0px;
}
.main-content {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.Bidlist {
min-width: 25%;
display: flex;
flex-direction: column;
padding-left: 0px!important;
padding-right: 1px!important;
background-color: grey;
}
.column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 2px solid #3D3C3D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 2px;
}
.tabcontainer {
color: #fff;
display: flex;
height: 40px;
background-color: black;
flex-direction: row;
justify-content: space-around;
}
.ContentContainer {
flex-grow: 1;
display: flex;
}
.instruments {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.instrument {
flex-grow: 1;
}
.footer {
height: 25px;
background-color: black;
}
考虑指定内容 height
以获得 "fix" 维度,并使用 overflow
设置元素框的溢出方式。
对于更高级的场景,您还可以考虑使用:
CSS 最小高度 属性
CSS 最大高度 属性
实例:https://jsfiddle.net/enz7ae5d/
.column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 2px solid #3D3C3D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 2px;
height: 200px;
overflow:scroll;
}
您需要将 min-height: 0
添加到 .main-content
CSS 规则中。这可以防止该元素拉伸以包含其子元素并将页脚推离屏幕(这是您要避免的不良行为)。
发生这种情况是因为弹性项目(弹性容器的子项)根据其内容建立 default minimum main-size,并且将拒绝小于该最小值。在你的情况下(外部弹性容器是垂直方向的),“主要尺寸”是 height
,并且有问题的弹性项目(.main-content
)正在建立一个基于内容的 min-height
.
(如果您希望列表项可滚动,那么您可能还想将 overflow-y:auto
添加到 .main-content
)
我刚开始学习 flex,到目前为止给我留下了深刻的印象。但是,我遇到了包含 header/footer 和三列的整页应用程序的问题。 第一列包含一个项目列表,由于我无法为其父级设置固定高度,每次列表增长时,它都会将页脚向下推。
这是布局的代码笔:http://codepen.io/anon/pen/vNVQNj Html :
<html>
<head>
<body>
<div class="app-wraper">
<div class="Navbar"></div>
<div class="main-content">
<div class="Bidlist">
<div class="column">
<div class="tabcontainer">
</div>
<div class="content-container">
<ul class="list-group instruments">
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
<li class="intrument"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer"></div>
</div>
</body>
</head>
</html>
CSS :
html,
body {
background-color: #212121;
overflow: hidden;
}
/* layout */
.app-wraper {
display: flex;
height: 100vh;
max-height: 100vh;
flex-direction: column;
justify-content: flex-start;
}
.Navbar {
height: 50px;
background-color: black;
margin-bottom: 0px;
}
.main-content {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.Bidlist {
min-width: 25%;
display: flex;
flex-direction: column;
padding-left: 0px!important;
padding-right: 1px!important;
background-color: grey;
}
.column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 2px solid #3D3C3D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 2px;
}
.tabcontainer {
color: #fff;
display: flex;
height: 40px;
background-color: black;
flex-direction: row;
justify-content: space-around;
}
.ContentContainer {
flex-grow: 1;
display: flex;
}
.instruments {
display: flex;
flex-direction: column;
overflow-y: auto;
}
.instrument {
flex-grow: 1;
}
.footer {
height: 25px;
background-color: black;
}
考虑指定内容 height
以获得 "fix" 维度,并使用 overflow
设置元素框的溢出方式。
对于更高级的场景,您还可以考虑使用:
CSS 最小高度 属性
CSS 最大高度 属性
实例:https://jsfiddle.net/enz7ae5d/
.column {
display: flex;
flex-direction: column;
flex-grow: 1;
border: 2px solid #3D3C3D;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin-bottom: 2px;
height: 200px;
overflow:scroll;
}
您需要将 min-height: 0
添加到 .main-content
CSS 规则中。这可以防止该元素拉伸以包含其子元素并将页脚推离屏幕(这是您要避免的不良行为)。
发生这种情况是因为弹性项目(弹性容器的子项)根据其内容建立 default minimum main-size,并且将拒绝小于该最小值。在你的情况下(外部弹性容器是垂直方向的),“主要尺寸”是 height
,并且有问题的弹性项目(.main-content
)正在建立一个基于内容的 min-height
.
(如果您希望列表项可滚动,那么您可能还想将 overflow-y:auto
添加到 .main-content
)