Chrome display issue with flexbox and overflow

Question

I'm using flexbox to do a straightforward header/body/footer layout. However, when my "body" has lots of content (enough to force a scrollbar), I'm seeing an issue in Chrome: it forces the header and footer elements to shrink when they shouldn't be. This only happens in Chrome (IE11 and Firefox work as expected). Should I be doing my CSS differently, or is this an issue with Chrome?

I've simplified my HTML/CSS to the bare minimum to show the issue, and created a screenshot comparison of what I'm seeing in different browsers (https://i.stack.imgur.com/Qn5Ln.png):

body { height:100%; position:absolute; left:0; top:0; right:0; bottom:0; background:red; display:flex; flex-direction:column; }

div { padding:10px; background:green; }

div#stretch { overflow:auto; flex:0 1 auto; min-height:200px; background:blue; }

#space { height:80000px; display:block; }

<div>Header</div>
<div id="stretch">
    <span id="space"></span>
</div>
<div>Footer</div>

Answer 1

On Firefox, it works because since version 34 it implements a auto as the initial value of min-height. See How can I get FF 33.x Flexbox behavior in FF 34.x? for more info.

In fact, you can check that if you set min-height: 0, which was the initial value on CSS 2.1, Firefox will behave like Chrome.

* { min-height: 0; }

* {
  min-height: 0;
}
body {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: red;
  display: flex;
  flex-direction: column;
}
div {
  padding: 10px;
  background: green;
}
div#stretch {
  overflow: auto;
  flex: 0 1 auto;
  min-height: 200px;
  background: blue;
}
#space {
  height: 80000px;
  display: block;
}

<div>Header</div>
<div id="stretch">
  <span id="space"></span>
</div>
<div>Footer</div>

However, you want the opposite. Currently Chrome doesn't support min-height: auto, but there is another way: you can disable shrink

* { flex-shrink: 0; }

* {
  flex-shrink: 0;
}
body {
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: red;
  display: flex;
  flex-direction: column;
}
div {
  padding: 10px;
  background: green;
}
div#stretch {
  overflow: auto;
  flex: 0 1 auto;
  min-height: 200px;
  background: blue;
}
#space {
  height: 80000px;
  display: block;
}

<div>Header</div>
<div id="stretch">
  <span id="space"></span>
</div>
<div>Footer</div>