Menu
On iOS Safari when I create a div is a flex item and also make it a flex container, its height does not stretch to match its contents. However if it is not made a flex container then its height does stretch to match its contents.
To elaborate - I am using css flexbox to place a footer at the bottom of the page. The page body has two divs - "maincontents" and "footer". Even if the "maincontents" div has little or no content, the footer will still stay at the bottom of the window. And if the "maincontents" div has a lot of content, it can push the footer down as required. This idea was easily implemented in flexbox by making the page body a flex container, and setting "maincontents" to "flex:1" and "footer" to "flex:0", so that way "maincontents" takes up all available space while "footer" gets pushed to the bottom of the window. It works well on all modern browsers including iOS safari.
The problem arises if I also make "maincontents" a flexbox itself (using display:flex). On iOS Safari the footer now always stays at the bottom of the window, even if maincontents has a lot of content that should push the footer down further; instead "maincontents" ends up continuing underneath "footer" rather than pushing it down.
I have made a barebones mockup of this on jsfiddle. https://jsfiddle.net/8xs1rocu/
Here is what you would see if you open that fiddle on a window desktop (chrome/ff/ie11)
And here is what you would see if you open it on an ipad or iphone (safari).
Notice that on iOS safari the footer does not get pushed down by the content, and the content instead ends up going under it. This does NOT happen on Chrome/FF/IE11 on a desktop; on those browsers the footer is pushed down by the contents of "maincontents".
If you remove the "display:flex" line, then it works perfectly on ios safari too, just as it does on other browsers. However I need that "display:flex" line because I will be putting other content inside "maincontents" that needs to be laid out a certain way using css flexbox.
Pasting the jsfiddle snippet code directly here:
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
.maincontents {
flex: 1;
display: flex; /* if you remove this line it works on Safari */
}
.footer {
flex: 0;
background-color: green;
}<html>
<head></head>
<body>
<div class="maincontents">
Main contents1 <br />
Main contents2 <br />
Main contents3 <br />
Main contents4 <br />
Main contents5 <br />
Main contents6 <br />
Main contents7 <br />
Main contents8 <br />
Main contents9 <br />
Main contents10 <br />
Main contents11 <br />
Main contents12 <br />
</div>
<div class="footer">
Footer1 <br />
Footer2 <br />
Footer3 <br />
Footer4 <br />
Footer5 <br />
Footer6 <br />
Footer7 <br />
</div>
</body>
</html>
367
Just add margin-top: auto; to the footer.
That will cause it to stick to the bottom of its container.
html, body {
height: 100%;
display: flex;
flex-direction: column;
}
.maincontents {
/* nothing to put here */
}
.footer {
margin-top: auto;
background-color: green;
}<html>
<head></head>
<body>
<div class="maincontents">
Main contents1 <br />
Main contents2 <br />
Main contents3 <br />
Main contents4 <br />
Main contents5 <br />
Main contents6 <br />
Main contents7 <br />
Main contents8 <br />
Main contents9 <br />
Main contents10 <br />
Main contents11 <br />
Main contents12 <br />
</div>
<div class="footer">
Footer1 <br />
Footer2 <br />
Footer3 <br />
Footer4 <br />
Footer5 <br />
Footer6 <br />
Footer7 <br />
</div>
</body>
</html>For anyone looking for an alternative answer that doesn't require setting margin-top: auto; on your footer (you may want to set a top margin on your footer at some point, who knows), this has always worked great in my projects.
Assuming the following basic layout (<main> is equivalent to the OP's .maincontents in this case):
<html lang="en-US">
<head></head>
<body>
<header></header>
<main>Main content</main>
<footer>Footer content<footer>
</body>
</html>
Simply add the following CSS to your reset:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
footer {
flex-shrink: 0;
}
flex-shrink: 0 overrides the default of 1 so the <footer> doesn't shrink while flex: 1 0 auto; allows <main> to grow to fit the rest of the available space.
31
answered Jan 23 '26 21:01
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With