Content in absolute positioned div is overflowing - html

Question

I have a weird question, and perhaps it's more suitable for the CSS fans out there, but why would content inside an absolute positioned div overflow out past everything else?
The example provided here (as a picture) shows that the content overflows out the blue bordered div. The content inside this box should rightfully define the the div's height no? How can this be remedied so that my 'blue' box fits to its content?
Here's the markup in question:
* {
box-sizing: border-box;
font-family: Verdana, Arial, sans-serif;
font-size: 9pt;
}
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: rgb(105, 105, 105);
}
#table-container {
display: table;
text-align: center;
width: 100%;
height: 100%;
}
#container {
display: table-cell;
vertical-align: middle;
}
#wrapper {
padding: 25px;
}
.tabs {
position: relative;
margin: 40px 0 25px;
}
.tab {
float: left;
}
.tab label {
background: rgb(105, 105, 105);
padding: 10px;
border: 1px solid transparent;
color: #FFF;
margin-left: -1px;
position: relative;
left: 1px;
top: -26px;
}
.tab label:hover {
background: #000;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: -1px;
left: 0;
background: rgb(222, 222, 222);
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid transparent;
opacity: 0;
color: rgb(58, 58, 58);
}
[type=radio]:checked~label {
background: rgb(222, 222, 222);
font-weight: bold;
border-bottom: 1px solid transparent;
color: #000;
z-index: 2;
}
[type=radio]:checked~label~.content {
z-index: 1;
opacity: 1;
}
/* CSS for Table and Field styling */
.table {
width: 100%;
padding: 0;
margin: 0;
text-align: left;
}
.table td {
border: 1px solid #000;
}
.inputbox {
border: 1px solid rgb(170, 170, 170);
width: 100%;
}
.inputbox:hover {
border: 1px solid rgb(109, 109, 109);
}
.input {
border-style: none;
border-color: inherit;
border-width: 0;
padding: 3px;
height: 20px;
}
input[type="text"],
textarea {
width: 100%;
box-sizing: border-box;
}
.input:focus {
background: rgb(255, 255, 196);
}
<div id="table-container">
<div id="container">
<div id="wrapper">
<div style="border: 1px solid red; text-align: left; font-size: 8pt; color: #fff;">Choose language/Choisissez langue:</div>
<div style="border: 1px solid blue; height: 100%;">
<div class="tabs">
<!-- TAB [1] -->
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked><label for="tab-1">English</label>
<div class="content">
<table class="table">
<tr>
<td>Traveller's Name:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="tname" class="input" name="Name of Traveler" tabindex="1" /></div>
</td>
<td style="width: 15%;"></td>
<td>Tan #:</td>
<td></td>
</tr>
<tr>
<td>Destination:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
</td>
<td></td>
<td>Status:</td>
<td></td>
</tr>
<tr>
<td>iTravel Trip Number:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="location" class="input" name="Location" tabindex="2" /></div>
</td>
<td></td>
<td>Date Issued:</td>
<td>
<div class="inputbox"><input type="text" id="dissued" class="input" disabled/></div>
</td>
</tr>
<tr>
<td>Event Plan ID Code:</td>
<td colspan="2">
<div class="inputbox"><input type="text" id="evt-plan-code" class="input" name="Event Plan ID Code" tabindex="4" /></div>
</td>
<td></td>
<td>Issued by:</td>
<td>
<div class="inputbox"><input type="text" id="issuer" class="input" disabled/></div>
</td>
</tr>
<tr>
<td>Dates of Travel</td>
<td>From:</td>
<td>
<div id="ddate" name="Departure Date" tabindex="5"></div>
</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td>To:</td>
<td>
<div id="rdate" name="Return Date" tabindex="6"></div>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Trip Purpose</td>
<td colspan="3"></td>
<td></td>
<td></td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1"><label for="tab-2">Français</label>
<div class="content">
tab2
</div>
</div>
</div>
</div>
<div style="border: 1px solid green; text-align: left;">
<input type="button" value="Issue TAN" id="issue">
<input type="button" value="Reset form" id="issue">
<input type="button" value="Save changes" id="issue">
</div>
</div>
<!-- end of div #wrapper -->
</div>
<!-- end of div #container -->
</div>
<!-- end of div #table-container -->

Answer 1

The absolute-positioned div doesn't affect the container div's size since setting position to absolute removes it from the document flow. It's essentially the same behaviour as when position is set to fixed, except it stays at the same place in the page when you scroll. More info can be found here and here.
As for how to fix the height of your div, the short answer is that it can't be done with CSS unless you use a different value for position, perhaps relative in your case but that will depend on the structure of your html. This question covers some other ways that you could go about it.