Flex box error with maximum height in chrome v43

Question

I have the following design for rendering a simple layout with a fixed header and footer and a flexible body 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 these 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 design works well in firefox, as well as in chrome, until version 43 is released. Now the height of the containers is incorrect, the header and footer are not expanded to display its contents, and the contents of the container lie above the contents of the header. Any idea how to fix this?

Edit

The problem is this line:

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

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

Change it to

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

, 100%, .

Answer 1

max-heigth flexbox: flexbox max-height

, , flex insight rows container 0

.rows .main {
  flex: 1;
}

.rows > * {
  flex: 0 0 auto
}