With these it helps Ive got a problem with flex layout I found here. Its from this guy . The problem is that footer scrolls down together with the page, instead of staying at the bottom of the content or at the bottom of the page if there isn't enough content. What I mean by that is , You have to use min-height instead of height this
Material Design Lite sticky mini-footer truncated when used in flex container
By : Ixam Norén
Date : March 29 2020, 07:55 AM
may help you . Material Design Lite sets .mdl-layout__container's height to 100%, impeding the ability of the inner elements to grow. This causes .page-content to overflow out of .mdl-layout__content, leaving zero room for the footer. Get rid of that troublesome height!
Does that help The problem is caused by setting a fixed height on your containers: html, body and #main. This means that the height of your flexbox container will always be exactly 100vh: the height of the viewport. Your #footer element has align-self: flex-end. This means that it will align itself to the end of your flex container: the bottom of the page.