How to prevent a flex item height to overflow due to it's content

Question

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;
}

If you don't add a height, how will the browser know when to wrap or overflow? It's not clear what the problem is, — Paulie_D, Nov 09 '15 at 11:30

score 32 · Accepted Answer · edited Jun 20 '20 at 09:12

32

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)

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 09 '15 at 15:34

dholbert

11,386
3
42
31

I had a similar problem to OP - we had a flex container with a table inside where rows could be added. The height of the container would increase to fit all the rows even if a `max-height` and `overflow-y:auto` was set on the container, but adding `min-height: 0px;` to the container fixed the problem. – Ayrton Massey Jul 13 '17 at 08:30
1

I can't believe how unintuitive this is... but it worked, thank you for your answer. – yogibear Jun 09 '20 at 14:24
Thank! this solution is so elegant! – Yonatan Naor Sep 06 '20 at 17:56
1

This is absolutely insane. I'm glad I found this answer, it worked like a charm, but why in the world would setting a *minimum* height prevent the *maximum* height from overflowing... – Cody Haines Apr 21 '21 at 03:15
Great! Worked fine! – Alex Nov 12 '21 at 08:37

score -2 · Answer 2 · answered Nov 09 '15 at 15:14

Consider specifying your content height in order to have a "fix" dimension and use overflow to set how you want the overflow for element's box.

For more advance scenario you can consider also using:

CSS min-height Property
CSS max-height Property

Live example: 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;
}

How to prevent a flex item height to overflow due to it's content

2 Answers2

Linked