Why won't div's height expand to its child elements? - html

Question

I'm still in the process of mastering css.
So I've made my portfolio website from scratch. as you scroll you'll see the main content is made up of a two column layout. My columns are fixed, wrapped in a relative div that takes up 100% width. the two fixed divs inside take up 50% width. Then I put content inside of the fixed divs -- like my portfolio.
But sometimes the fixed divs height don't expand to the height of the content within it. Especially when you resize. Why?
Here's a link to my website so you can see what I mean.
http://parkhargravedesigns.com/
if ($(window).width() > 768) {
$('.f, .fixedContainer').css('height', $('.text').height());
$(window).resize(function() {
$('.f, .fixedContainer').css('height', $('.text').height());
});
$('.f2,.fixedContainer2').css('height', $('.text2').height());
$(window).resize(function() {
$('.f2,.fixedContainer2').css('height', $('.text2').height());
});
$('.f3, .fixedContainer3').css('height', $('.text3').height());
$(window).resize(function() {
$('.f3, .fixedContainer3').css('height', $('.text3').height());
});
}
.fixedContainer,
.fixedContainer2,
.fixedContainer3 {
position: relative!important;
width: 100%!important;
}
.headerEle2 {
display: block!important;
}
.f,
.f2,
.f3 {
background-color: #293553;
background-size: cover!important;
width: 50%!important;
position: absolute!important;
top: 0;
left: 0;
color: black;
font-size: 70px;
}
.f2 {
background-color: #e7384c!important;
}
.text,
.text2,
.text3 {
background-color: white!important;
background-size: cover!important;
color: black;
position: absolute!important;
right: 0!important;
top: 0!important;
width: 50%!important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fixedContainer">
<div class="f">
<div id="aboutStuff">
<p class="fTitle">
About
</p>
<div class="headerEle2 NavDiv"></div>
</div>
</div>
<div id="profilePic">
<img src="album/profilePic2.png" alt="oops">
</div>
<div class="text">
<h1>I'M A WEB & GRAPHIC DESIGNER FROM B.C, CANADA.</h1>
<p>
A strong interest in art and design was my gateway to the creative industry, which led to taking my first steps in the digital world. During my time at North Island College I fell inlove with web design because it allowed me to express my creativity while
developing the skills necessary to create functionable websites.
</p>
<h1>SERVICES:</h1>
<p>
<b>Website Design and Development Logo Design</b>
</p>
<h1>QUALIFICATIONS:</h1>
<p>
<b>HTML
CSS
JavaScript
JQuery
Illustrator
Photoshop
</b>
</p>
<h1>EDUCATION:</h1>
<p>
<b>Program:</b> Web Design & Interactive Media Certificate
<b>Where:</b> North Island College, Comox Valley, BC In this program I gained skills in HTML,<br> CSS, Javascript, PHP and Adobe CC.
</p>
<h1>DESIGN PROCESS</h1>
<p>
A user-centered mindset and sensitivity for design are <br> key concepts I carry throughout the design process.<br><br> This rough framework outlines my process of<br> developing digital experiences: 1. RESEARCH and gather the present state 2. STRUCTURE
setup and content of the project 3. CONCEPT AND STRATEGY <br> 4. CREATE, evaluate and iterate deliverables like -Site maps -User flow -Sketches and Infographics -Wireframes
</p>
<!--
<img src = "album/homeFixed.png" alt = "oops" id = "text1Logo">
-->
</div>
</div>