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 –