Issue with Flexbox Height Growth - html

Question

The issue I am having is with my Flexbox growing in height when I enter content inside of it. I am not 100% sure why this is happening, but I believe it has something to do with it not being in an absolute position and thus keeping its height property.
Included is the CodePen where I have the HTML and CSS setup for the Flexbox style site that I am making (Also included the Snippet below) Here is so info about it
body p {
color: white;
font-size: 30px;
margin-top: 10px !important; }
.home-wrap {
display: flex;
min-height: 100vh;
justify-content: center;
transition: background 1.5s ease-in-out; }
.home-sections {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 775px;
max-width: 775px; }
.home-sections section {
border-radius: 20px;
border: 3px solid white;
overflow: hidden; }
.home-sections .flex {
display: flex;
flex-direction: row; }
.home-sections .flex--center {
justify-content: center; }
.col-1 {
text-align: center; }
.alignTop {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 100%;
align-items: flex-start;
transition: opacity 1.5s ease-in-out; }
.alignCenter {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: relative;
width: 50%; }
.alignBottom {
display: flex;
flex-direction: row;
flex-wrap: wrap;
min-width: 100%;
align-items: flex-end;
transition: opacity 1.5s ease-in-out; }
section.about {
position: absolute;
width: 100%;
height: 220%;
left: 100%;
box-shadow: -6px 6px 8px rgba(0, 0, 0, 0.6);
z-index: 1;
transition: transform 1.5s ease-in-out;
animation: enticing-grow 2s 2;
background-color: #CB7E15; }
section.about .displayB {
display: block;
text-align: center; }
section.about .displayB h1 {
margin-top: 10px;
text-align: center;
font-size: 30px;
text-shadow: 5px 5px 8px white; }
section.about .displayB p {
font-size: 16px; }
section.about .mike-faq {
display: flex;
opacity: 0;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
max-width: 100%;
transition: all 1.5s ease-in-out; }
section.setup {
width: calc(55% - 6px);
height: 80%;
box-shadow: -8px 8px 8px rgba(0, 0, 0, 0.6);
background-color: #004EFF; }
section.social {
width: calc(45% - 6px);
height: 55%;
box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.6);
opacity: 0.5;
transition: all 1s ease-in-out;
background-color: #585656; }
section.social:hover {
opacity: 1;
transform: scale(1.5);
z-index: 2; }
section.social .displayB {
display: block; }
section.social .displayB p {
text-align: center;
margin: 10px; }
section.social .social-wrap {
display: flex;
flex-direction: row;
max-width: 100%;
justify-content: space-around; }
section.social .social-wrap .twitter-logo {
background-image: url(/assets/img/twitter-logo.gif);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #1DA1F2; }
section.social .social-wrap .email-logo {
background-image: url(/assets/img/gmail-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #E70F10; }
section.social .social-wrap .facebook-logo {
background-image: url(/assets/img/facebook-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 10px 5px #3C5A98; }
section.social .social-wrap .github-logo {
background-image: url(/assets/img/github-logo.png);
background-size: contain;
width: 55px;
height: 55px;
box-shadow: 0 5px 20px 0 #E04006; }
section.twitch {
width: calc(55% - 6px);
height: 80%;
box-shadow: -8px -8px 8px rgba(0, 0, 0, 0.6);
background-color: #5A3E85; }
section.twitch h1 {
margin-top: 10px;
font-size: 30px;
text-align: center; }
section.twitch p {
font-size: 16px; }
section.twitch .displayB {
display: block;
text-align: center; }
.button {
color: #5A3E85; }
section.webdesign {
width: calc(45% - 6px);
height: 53%;
box-shadow: 8px -8px 8px rgba(0, 0, 0, 0.6);
background-color: #1F843A; }
section.youtube {
position: absolute;
width: 95%;
height: 140%;
margin-right: 5px;
box-shadow: -8px 0 8px rgba(0, 0, 0, 0.6);
transition: opacity 1.5s ease-in-out;
background-color: #CC181E; }
<div class="home-wrap">
<div class="home-sections">
<div class="alignTop">
<section class="twitch">
<div class="flex flex--center displayB">
<h1>Twitch</h1>
<!-- <p>I've been livestreaming on Twitch since it's days as Justin.tv - I plan to pick it back up again once I can figure out a schedule</p> -->
</div>
</section>
<section class="webdesign">
<div class="flex flex--center">
<p>Web Design</p>
</div>
</section>
</div>
<div class="alignCenter">
<section class="youtube">
<div class="flex flex--center">
<P>YouTube</P>
</div>
</section>
<section class="about grown">
<div class="flex flex--center displayB">
<h1>What's Going on, Mike here, and Welcome to my Site!</h1>
<p>I'm your typical 26 year old nerd, who loves computers, video games, pretty much anything tech. Along with that, I have a ton of hobbies that range from playing music to stock investments. </p>
<p>I've always been interested in, and worked on my web design skills, but it wasn't until the past few months where I decided this is what I am passionate about.</p>
<p>With that said, click around the site to learn more about me. All panels are expandable clickable which will allow you to learn more about "Mike" and who I am!</p>
<div class="mike-faq">
<p>FAQ 1</p>
<p>FAQ 2 </p>
<p>FAQ 3</p>
<p>FAQ 4</p>
</div>
</div>
</section>
</div>
<div class="alignBottom">
<section class="setup">
<div class="flex flex--center">
<p>Setup</p>
</div>
</section>
<section class="social">
<div class="flex flex--center displayB">
<p>Social</p>
<div class="social-wrap">
<div class="twitter-logo"></div>
<div class="email-logo"></div>
<div class="facebook-logo"></div>
<div class="github-logo"></div>
</div>
</div>
</section>
</div>
</div>
1 - I have a wrapping div around the site content so I can control the flow and background of the back
2 - I have another wrapping div for each "Row" of Flexbox so I can have them align in different areas (Top is aligned Flex-Start, Center is aligned Flex-Center and Bottom is aligned Flex-Bottom)
3 - The 2 Center Flexboxes (YouTube and About) are set with Absolute position so I am able to have the "About" section grow out and overlap the top and bottom sections.
4 - I have all the fleboxes set with % height and width so they will scale with the window value.
5 - Inside of each FlexBox section, I have a container so that I can manipulate the content and move it around so it fits within their parent flexbox.
Now, I am not 100% sure if all the nesting and parent/child elements is the best way to handle what I am trying to do, but I haven't been able to visualize it any other way and get it work (outside of the way I am doing it).
So - to go over it again, inside of the "Twitch: panel I have a <p> section that when I uncomment, the flexbox will grow in height, rather than remain the same. However, in the "About" section, this doesn't happen. The only difference I am able to see is that the "About" section is position: absolute.

Answer 1

You can play around by giving alignTop, alignCenter and alignBottom heights.
http://codepen.io/anon/pen/GWEgMK : try commenting in and out what you said then find the adequates values for heights you are happy with.
.alignTop {
height:33%;}
.alignCenter {
height:25%;}
.alignBottom {
height:20%;}
Not sure that's exactly what you want but to be honnest there is way too much clutter in your codepen for us to really want to try :) Are the animations even relevant ?

Answer 2

rather than % heights you may want to let flexbox handle the heights for you, as in grow to the viewport as it is designed to do but then use a max-height with a vh unit rather than a % value (like max-height: 75vh instead of max-height:75%). vh uses the viewport to scale not the parent div.