min-height在firefox中可用，但不在chrome中

我有一个flex css，其中的一切工作都很好，但是当我使用chrome时，main_content具有整个屏幕大小，但其中的div只有内容min-height在firefox中可用，但不在chrome中

.sticky-footer-wrapper{ 
    min-height: 100%; 
    display: -webkit-flex; 
    display: flex; 
    flex-direction: column; 
} 
.main_content{ 
    flex:1; 
} 
.main_footer{ 
    background: 3em; 
    height: 3em; 
}

这是标记：

<div class="sticky-footer-wrapper"> 

<nav class="main_header"> 
</nav> 

<main class="main_content" role="main"> 
    <div>content...</div> 
</main> 

<footer class="main_footer Footer"> 
</footer> 

</div>

下面是一个的jsfiddle：

https://jsfiddle.net/9usvm1c1/1/

所有的内容应该是黄色的，但它不是

我在做什么错了？

来源

2016-11-16 Victor Oliveira

可以添加标记 – Geeky

可能重复：http://stackoverflow.com/q/33636796/3597276 –