Shrink flexbox child by scrolling - works in Chrome not Firefox [duplicate]

This question already has an answer here:

• firefox overflow-y not working with nested flexbox 1 answer

I want a flexbox child to be shrinked by becoming scrollable. I have created this (jsfiddle) which works in Chrome, but not in Firefox:

• In Chrome, when the frame is shrunk vertically so that the content of the green section doesn't fit, the green section becomes scrollable. The main frame does not have a scrollbar.

• In Firefox however, the whole frame becomes gains a scrollbar, and the scrollbar of the green section is always disabled.

HTML:

<div class="flex-column" style="height: 100%">
  <div style="background-color: red">
    Foo
  </div>
  <div class="flex-column flex-shrink1">
    <div class="flex-column flex-shrink1" style="overflow-y: scroll; background-color: green">
      Bar<br>Bar<br>Bar<br>Bar<br>
      Bar<br>Bar<br>Bar<br>Bar<br>
      Bar<br>Bar<br>Bar<br>Bar<br>
      Bar<br>Bar<br>Bar<br>Bar<br>
    </div>
  </div>
</div>

CSS:

html, body {
    height: 100%;
    padding: 0px;
    margin: 0px;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-column>* {
    flex-shrink: 0;
}

.flex-shrink1 {
    flex-shrink: 1;
}

UPDATE: The fix for Firefox is to add style min-height: 0 to the div which contains the scrollable div, and possibly parent flex items when using nested flex layouts (see 2, 3). However, this does not resolve the problem on Internet Explorer 11.