Flex v43中最大高度的Flex盒子错误

Question

I have the following construct to render a simple layout with fixed header and footer and a flexible body that with scrollable content: http://jsbin.com/jokevuyave/1/edit?html,css

<div id="main-view">
  <div class="rows">
    <div class="head">header</div>
    <div class="main scroll"></div>
    <div>footer</div>
  </div>
</div>

and this are the styles:

.rows,
.columns {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.columns {
  flex-direction: row;
  max-height: 100%;
  overflow: hidden;
}

.main {
  flex: 1;
}

.scroll {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
}

.scroll > * {
  margin: 0;
  width: 100%;
  overflow: auto;
}


html,
body,
#main-container,
#main-view,
.scrollable {
  height: 100%;
  margin: 0
}

#main-view > div {
  max-height: 100%;
  display: flex;
}

.head {
  height: 120px
}

This construct works well in firefox and also in chrome until the version 43 was released. Now the height of the containers is wrong, header and footer don't expand to display its content and the content container lays over the header content. Any idea how to fix this?

Edit

The problem seems to be this line:

#main-view > div {
  max-height: 100%;
}

The idea is that the box should only expand if the content is to large.

Change it to

#main-view > div {
  height: 100%;
}

fix the wrong height for the inner container but now the box has always the height of 100%, even if the content is really small.

Answer 1

There is a problem with max-heigth and flexbox: flexbox misbehaving with max-height

So the solution is to set the flex property to every element insight rows container to 0

.rows .main {
  flex: 1;
}

.rows > * {
  flex: 0 0 auto
}