Parent is absolute positions, children are relative, parent should have their height - css

Question

I have got a div #budget-search-thirds which is absolute positions, however it's children are not. Shouldn't this parent div take on the height of it's children?
#budget-search-thirds {
background: red;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 20px 0;
}
.container, .super-container {
display: block;
margin: 0 auto;
position: relative;
max-width: 1120px;
clear: both;
overflow: hidden;
}
.wrapper {
display: block;
padding: 0 10px;
width: auto;
}
.row-block {
margin: 0;
position: relative;
float: left;
display: block;
width: 100%;
clear: both;
background: #fff;
}
<div class="row-block finance parallax__group">
<div class="parallax__layer--back parallax__layer"></div>
<div class="wrapper">
<div class="container">
<div class="parallax__layer--base parallax__layer" id="budget-search-thirds">
<div class="sixcol"></div>
<div class="sixcol last" style="
display: block;
">
<h2><span class="preHeading">Used Car</span>Finance Specialists</h2>
<p class="right">We have relationships with high street lenders and specialist motoring finance houses too, that is why <strong>we have helped hundreds of customers</strong> secure the <strong>best finance deal</strong> for their budget.</p>
<div class="fin-slider">
<div id="finance-budget-range-min" class="clear-fix">
<div class="row">
<div class="budget-slider">
<div class="form-group">
<label for="amount-budget-range-min">Monthly Budget:</label>
<input type="text" id="amount-budget-range-min">
</div>
<div class="slider-group">
<div id="slider-range-min" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"><div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 20%;"></div><span class="ui-slider-handle ui-state-default ui-corner-all" tabindex="0" style="left: 20%;"></span></div>
</div>
</div>
<div class="search-btn">
<a id="button-budget-range-min" class="button" href="/search_page.php?budget=200" title="budget search">Search</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

The definition of position: absolute; is that the element is positioned relative to its first positioned (not-static) ancestor element.
Currently the #budget-search-thirds is positioned relative to <div class="container">. Since the #budget-search-thirds top, right, bottom and left properties are set to 0, relative to <div class="container">, therefore the height is determined by the <div class="container"> instead of its children.