min-height 适用于 Firefox 但不适用于 chrome答案

【问题标题】：min-height works on firefox but not in chromemin-height 适用于 Firefox 但不适用于 chrome
【发布时间】：2017-03-31 03:38:44
【问题描述】：

我有一个 flex css，它在 firefox 上一切正常，但是当我使用 chrome 时，main_content 具有整个屏幕大小，但其中的 div 只是内容的高度

.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/

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

我做错了什么？

【问题讨论】：

你能添加标记吗
可能重复：stackoverflow.com/q/33636796/3597276

标签： html css flexbox

【解决方案1】：

最小高度与 chrome 中的百分比不兼容。使用像素。例如：最小高度：600px；

【讨论】：

真的吗？我怎样才能以这种方式使用响应式布局？
那么不要使用高度。尝试使用填充来调整它。即使您使用百分比表示的高度，您也必须为此编写单独的响应式代码。

【解决方案2】：

您是否尝试过使用

align-content: stretch;

而不是最小高度？

请发布一个工作示例/小提琴！

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

【讨论】：