Flex-layout: sticky footer issue with flex-basis

[mattiLeBlanc]

Bug, feature request, or proposal:

Checking my app on IE10-11 uncovered I was see an issue with my sticky footer. It was not sticky, but just say under the content block positioned above:

+site(fxLayout="column" fxFlex)
  |- header
  |- content(fxFlex)
  |- footer
==white-space==

So I went back to the article written by Philip Walton a couple of years ago, https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/, and implemented his fix.

However, I was a bit puzzled that this fix is still required nowadays.
So I was wondering if we still need to do this:

+site(fxLayout="column" fxFlex) --> add height: 100%
  |- header  --> add flex-shrink: 0
  |- content(fxFlex)  --> add flex: 1 0 auto
  |- footer -->add flex-shrink: 0

Only if I add the flex:1 0 auto to the content block, will it work fine in Chrome. I am actually overriding fxFlex at this moment.

What is the expected behavior?

Header at top, content stretched and footer sticky at the bottom.

What is the current behavior?

In IE10-11 footer is not sticky at bottom. When adding height 100% to site, then Chrome will squeeze the content block so that everything will fit. Fix on, break the other and vice versa.

[CaerusKaru]

IE10 is not supported by Flex Layout. If this is also an issue with IE11, please provide a StackBlitz/Plunkr minimal reproduction so that we can check this out. There were some rumblings that we may change the fxFlex directive to use auto, which as you mentioned may fix this issue.

[mattiLeBlanc]

I created a stackblitz:
https://stackblitz.com/edit/angular-txxdrw

This is based on on my project but simplified. IE11 is working fine with my current setup.
I had to add .fxFlex via hostbindig to my components that run in the router-outlet.
Also putting a height:100vh; on my app.component help scale the viewport.
I will look back through my own project and see if I can recreate the issue there and see how it differs to the stackblitz.
It came down to the footer not sticking because the body part wasn't stretching. But I am not seeing that behaviour right now.
I look into it after lunch.

[mattiLeBlanc]

okay, I found the issue again. It has to do with Chrome allowing its elements to shrink below 1.

So one issue is visisble here:
https://stackblitz.com/edit/angular-nignbs
When you make the page vertically smaller and scroll you will see the footer will start to float.

The fix is in the styles.css (in the root) where I define .fxFlex. Using flex: 1 0 auto; makes the footer behave correctly in combination with the flex-shrink 0 on the header and the footer.
I checked and IE11 shows the same behaviour. With auto it works, without it doesnt.

Same on Safari and I assume FF.

So I guess my issue is not 100% an IE bug but more a bug that Chrome allows content to shrink beyond the minimal height, illustrater here:

When I apply the flex-shrink 0 to header and footer and flex: 1 0 auto to the body, it scrolls normally.
And it would like like:

[mattiLeBlanc]

Hmm, I just create another fork where I got rid of the flex-shrink 0 on the head and footer.
https://stackblitz.com/edit/angular-pfbyv3

It still works for the footer.
So the flex: 1 0 auto on the my-app apparently is the most important factor.

However (finally found out why :) in Chrome it allows for the squeezing of the body content into the header (like you see in the sxreenshot above).

[CaerusKaru]

Ok then that's to be expected, we'll try to get a fix in for this as soon as we can.

[mattiLeBlanc]

I hope I am not confusing you :).
It's just that there are a lot of different scenario's and browsers. I always lose track what happens when and on what browser. But I seem to be getting closer now.

[CaerusKaru]

@ThomasBurleson alluded to a fix for this in https://github.com/angular/flex-layout/issues/481#issuecomment-347692039. I don't think the PR was ever opened, but should be soon.

[ThomasBurleson]

This is related to on-going work to improve usages with flex-basis (see issue #438)

[Springrbua]

Also putting a height:100vh; on my app.component help scale the viewport.

Not related to this Issue, but @mattiLeBlanc be aware, that on many mobile browsers (including Chrome for Android) the 100vh are inclusive the URL-Bar, so the container you set to 100vh will be scrollable!

[p4309027]

thanks @mattiLeBlanc for sharing your solution, it works great!
If anybody is still interested in for sticky footer, I found simpler solution here , credit to David Kerwick

[mattiLeBlanc]

@ThomasBurleson Thanks to you and the team for your efforts of getting these issues resolved!

[ThomasBurleson]

@mattiLeBlanc - Thank you. Note that we are still working/tweaking improvements for fxFlex. And more REALLY COOL things are coming in April.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}