弹性父级不会扩展到孩子的身高

Question

这可能是一个业余的问题，因为我刚刚开始使用Flexbox，但在创建以下布局时遇到了问题。

https://jsfiddle.net/wp6hsnjo/

我的目标是在Main中有两行(Main在顶部，Footer在底部(，然后有3列，第一列和最后一列是固定的，中心列填充剩余的空间。我遇到的困难是Main容器不会继承子元素的高度。。这会让黏糊糊的脚丫陷入困境。有没有一种方法可以让Maindiv展开以匹配子元素的高度？我试过玩溢出和高度设置，但没有成功。

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">&copy; 2020 this is the footer</div>
</footer> <!-- FOOTER END -->

</div> <!-- CONTAINER END -->

Answer 1

从#container元素中删除flex-flow: wrap可以做到这一点，并从.portfolio元素中删除300px的底部填充以防止出现大量额外空间。

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">&copy; 2020 this is the footer</div>
</footer> <!-- FOOTER END -->


</div> <!-- CONTAINER END -->
</body>