在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>