Why Does My Flexbox Sticky Footer Not Work in Safari

Why Does My Flexbox Sticky Footer Not Work in Safari?

Thanks to some help from the developer of the site I took the example from, I discovered the cause of my problems: the html element didn't have any height set, thus the min-height on body didn't have any effect. Setting html { height: 100%; } resulted in the expected behaviour.

I admittedly still don't fully understand the why of what caused the initial layout and horizontal resizing to work, but vertical resizing not to, but this at least solves the problem. There was some suggestion from the developer that Safari has some bugginess related to using vh measurements, so that may be it. If anyone can shed some light on that issue, by all means go for it.

Flexbox sticky footer not working in Safari or Chrome OSX

Found the answer here.

Apparently (should I say unsurprisingly?) there are some bugs in the way certain browsers handle flexboxes.

I was able to get the behavior I wanted reliably across IE, Firefox and Chrome on Windows and Safari, Firefox and Chrome on OSX with the following:

#s4-workspace {
    display: flex;
    flex-direction: column;
}

#s4-bodyContainer {
    flex: 1 0 auto;
}

#footer {
    clear: both;
    height: 100px;
    min-height: 100px;
    width:100%;
    background-color: #2e2e2e;
    font-size: 11px;
    margin-top: auto;
    flex-shrink: 0;
}

CSS flexbox layout not working in safari

#content {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
}

would suffice.

Flexbox Sticky Footer Issue?

You need to add a few more rules into your css to get the result you seek.
As it is now, it is basically stating that when the space gets reduced, your main content should take more space. Therefore, the footer does not really gets overlapped but rather its size decreases.

Here is something I had done a few months ago... A lot of rules in the css are legacy so be careful but I believe it is close to what you aim to do :
http://plnkr.co/edit/o2BAwvg3XV4YjwAwwmYR?p=preview

But really I encourage you to use this to create your flex css rules :
http://the-echoplex.net/flexyboxes/

sticky footer with flexbox on ios

Z.Neeson's comment on Flexbox and vertical scroll in a full-height app using NEWER flexbox api seems to apply here, since the addition of this rule fixes it:

    .body-content, footer {
        flex-shrink: 0;
    }

Sticky footer with flexbox on body and children

When using viewport units, no need to set it on all items, in this case the body is enough. Also, drop the height: 100vh and it will work fine.

Note 1; the div version works, kind of, but not fully either, because you didn't gave it height/min-height as the body has.

Note 2; I read somewhere that when using both height/min-height with the same value, it could go wrong/be buggy in some browsers, which might be the case here. When I find where it was, I'll update my answer.

Stack snippet

body {  display: flex;  flex-direction: column;  min-height: 100vh;}
section {  flex: 1;  display: flex;}
section section {  display: block;}

<header>  <h1>Test Flexbox</h1></header>
<section>  <aside>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>    <p>Test Test Test</p>  </aside>
  <section>    <article>      <h2>Test</h2>      <p>Welome to this flex box test snippet.</p>    </article>  </section>
</section>
<footer>  <p>Here goes the footer, that should always stick to the bottom</p></footer>