在Firefox和Chrome 48中使用flexbox出现渲染问题

Question

在chrome 47上（正确的行为）： 在chrome 47上，div .scroll正确滚动，使用flex调整高度为100％。

在Firefox（错误行为）上： 在Firefox上，与div一起.scroll使用的是内容高度，并且滚动不正确。

跨浏览器解决此问题的方法是什么？

http://jsfiddle.net/d4nkevee/

for (var i = 0; i < 100; i++)

  $(".scroll").append("Dynamic content<br>");

body,

html {

  margin: 0;

  padding: 0;

}

.container {

  box-sizing: border-box;

  position: absolute;

  height: 100%;

  width: 100%;

  display: flex;

  flex-direction: column;

}

.content {

  background: yellow;

  flex: 1;

  display: flex;

  flex-direction: column;

}

.scroll {

  flex: 1 1 auto;

  overflow: scroll;

}

<div class="container">

  

  <div class="bar">Small</div>

  

  <div class="content">

    

    <div>Static content</div>

    <div class="scroll"></div>

    <div>Static content</div>

    

  </div>

  

  <div class="footer">Small</div>

  

</div>