Flex parent doesn't expand to height of child - css

Question

This might be a bit of an amateur question as I'm just getting started with using Flexbox, but I'm having trouble creating the following layout.
https://jsfiddle.net/wp6hsnjo/
I'm aiming to have two rows (Main on top and Footer on the bottom) then 3 columns within Main, the first and last being fixed with the center column filling the remaining space. The difficulty I'm having is that the Main container won't inherit the height of the child elements.. which leaves the sticky footer in limbo. Is there a way that I can get the Main div to expand to match the height of the child elements? I've tried playing around with overflow and height settings but to no success.
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
background-color: #f4f3f0;
box-sizing: border-box;
font-family: arimo, sans-serif;
color: #555760;
}
#container {
max-width:1560px;
margin: 0 auto;
display: flex;
flex-flow: wrap;
min-height: 100vh;
flex-direction: column;
}
#main {
display: flex;
flex: 1 0 auto;
height:auto;
}
header {
padding:30px;
flex: 0 0 100px;
order: 1;
}
#logo-container {
}
.logo {
width:75px;
margin-top:5px;
position:fixed;
}
nav {
width:100px;
text-align: right;
flex: 0 0 100px;
order: 3;
padding:30px;
}
nav ul {
list-style-type: none;
width:100px;
margin: 0;
padding: 0;}
.main-nav {
position:fixed;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
color: #222;
letter-spacing: 0.3px;
}
.main-nav li {
margin-bottom:7px;
}
.social-media {
position: fixed;
bottom:0;
margin-bottom:40px;
text-align: right;
width: 100px;
}
.social-media-icons {
width:16px;
height:16px;
margin-bottom:18px;
}
#page-content {
margin:30px 0 60px 0;
flex: 1;
order: 2;
}
.portfolio {
display: flex;
flex-wrap: wrap;
padding-bottom:300px;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.span2 {
position: relative;
flex-basis: calc(66.666% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
footer {
order: 2;
margin: 0 0 58px 30px;
flex-shrink: 0;
font-size: 12px;
}
.hidden {
opacity: 0;
}
#keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
.fade-in-element {
animation: fade-in 1.4s;
}
<div id="container"> <!-- CONTAINER -->
<div id="main">
<header> <!-- HEADER -->
<div id="logo-container">
<img src="images/icons/logo-black.png" alt="Logo" class="logo">
</div>
</header> <!-- HEADER END -->
<nav>
<ul class="main-nav">
<li>Home</li>
<li>Archive</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="social-media">
</ul>
</nav>
<section id="page-content"> <!-- PAGE CONTENT -->
<div class="portfolio">
<div class="span2">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="span2">
<div class="content">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
</section> <!-- PAGE CONTENT END -->
</div><!-- MAIN END -->
<footer class="hidden" > <!-- FOOTER -->
<div id="copyright">© 2020 this is the footer</div>
</footer> <!-- FOOTER END -->
</div> <!-- CONTAINER END -->

Answer 1

Removing flex-flow: wrap from your #container element does the trick, and removing the 300px bottom padding from the .portfolio element to prevent a bunch of extra space.
var animateHTML = function() {
var elems;
var windowHeight;
function init() {
elems = document.querySelectorAll('.hidden');
windowHeight = window.innerHeight;
addEventHandlers();
checkPosition();
}
function addEventHandlers() {
window.addEventListener('scroll', checkPosition);
window.addEventListener('resize', init);
}
function checkPosition() {
for (var i = 0; i < elems.length; i++) {
var positionFromTop = elems[i].getBoundingClientRect().top;
if (positionFromTop - windowHeight <= 0) {
elems[i].className = elems[i].className.replace(
'hidden',
'fade-in-element'
);
}
if ((positionFromTop - windowHeight > 1) || (positionFromTop < 0)) {
elems[i].className = elems[i].className.replace(
'fade-in-element',
'hidden'
);
}
}
}
return {
init: init
};
};
html, body {
height: 100%;
}
body {
margin:0;
padding:0;
background-color: #f4f3f0;
box-sizing: border-box;
font-family: arimo, sans-serif;
color: #555760;
}
#container {
max-width:1560px;
margin: 0 auto;
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main {
display: flex;
flex: 1 0 auto;
}
header {
padding:30px;
flex: 0 0 100px;
order: 1;
}
#logo-container {
}
.logo {
width:75px;
margin-top:5px;
position:fixed;
}
nav {
width:100px;
text-align: right;
flex: 0 0 100px;
order: 3;
padding:30px;
}
nav ul {
list-style-type: none;
width:100px;
margin: 0;
padding: 0;}
.main-nav {
position:fixed;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
color: #222;
letter-spacing: 0.3px;
}
.main-nav li {
margin-bottom:7px;
}
.social-media {
position: fixed;
bottom:0;
margin-bottom:40px;
text-align: right;
width: 100px;
}
.social-media-icons {
width:16px;
height:16px;
margin-bottom:18px;
}
#page-content {
margin:30px 0 60px 0;
flex: 1;
order: 2;
}
.portfolio {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.span2 {
position: relative;
flex-basis: calc(66.666% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
footer {
order: 2;
margin: 0 0 58px 30px;
flex-shrink: 0;
font-size: 12px;
}
.hidden {
opacity: 0;
}
#keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
.fade-in-element {
animation: fade-in 1.4s;
}
<body onload="animateHTML().init();">
<div id="container"> <!-- CONTAINER -->
<div id="main">
<header> <!-- HEADER -->
<div id="logo-container">
<img src="images/icons/logo-black.png" alt="Logo" class="logo">
</div>
</header> <!-- HEADER END -->
<nav>
<ul class="main-nav">
<li>Home</li>
<li>Archive</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="social-media">
</ul>
</nav>
<section id="page-content"> <!-- PAGE CONTENT -->
<div class="portfolio">
<div class="span2">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="span2">
<div class="content">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
</section> <!-- PAGE CONTENT END -->
</div><!-- MAIN END -->
<footer class="hidden" > <!-- FOOTER -->
<div id="copyright">© 2020 this is the footer</div>
</footer> <!-- FOOTER END -->
</div> <!-- CONTAINER END -->
</body>