Menu
I just started learning flex and so far i'm impressed. However, i'm having an issue with a full page app containing header/footer and three columns. The first column contain a list of items and since i can't put a fixed height to it's parent, every time the list grow, it push the footer down.
Here's a codepen with the layout : 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;
}
980
Turns out, it's a one-line fix: add min-width: 0; to the item.
By default, the child elements of a flexbox container will stretch vertically to fill the height of the container. This can be prevented by using the align-self property on the child element that you do not want to stretch.
This means that if you have a set of flex items that are too wide for their container, they will overflow it. If you want to cause them to wrap once they become too wide you must add the flex-wrap property with a value of wrap , or use the shorthand flex-flow with values of row wrap or column wrap .
You need to add min-height: 0 to your .main-content CSS rule. That prevents that element from stretching to contain its children and pushing the footer offscreen (which is the bad behavior that you're trying to avoid).
This happens because flex items (children of a flex container) establish a default minimum main-size, based on their contents, and will refuse to be smaller than that minimum. In your case (with the outer flex container being vertically-oriented), "main-size" is height, and the flex item in question (.main-content) is establishing a content-based min-height.
(If you want the list items to be scrollable, then you may want to also add overflow-y:auto to .main-content)
140
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
