min-height works on firefox but not in chrome

Question

I have a flex css which everything works fine on firefox, but when I am using chrome, the main_content has the whole screen size, but the div inside it has just the height of the content

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

This is the markup:

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

Here is a jsfiddle:

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

all the content should be yellow, but it is not

What am I doing wrong?

possible duplicate: http://stackoverflow.com/q/33636796/3597276 — Michael Benjamin, Nov 17 '16 at 00:08

score 1 · Answer 1 · answered Nov 16 '16 at 19:34

1

Min height is not compatible with percentage in chrome. Use pixels. Ex: min-height:600px;

answered Nov 16 '16 at 19:34

Sayantan Das

73
1
1
16

Really? And how can I work with responsive layout this way? – Victor Oliveira Nov 16 '16 at 19:36
Dont use height then. try to adjust it with padding. Even if you use height in percentage you have to write individual responsive code for that. – Sayantan Das Nov 29 '16 at 06:12

score 1 · Answer 2 · answered Nov 16 '16 at 19:39

1

have you tried using

align-content: stretch;

instead of min-height?

please post a working example/fiddle!

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

answered Nov 16 '16 at 19:39

Scott Murphy

136
5

min-height works on firefox but not in chrome

2 Answers2