Div container overflowing a row - css

Question

After setting all parents to height of 100% and adding a new div container above my map, I get this overflow of the map container within the row. The new div above the map is this and is the locationQuickSearch id :
Where does this come from?
<div id="page-content-wrapper">
<div class="content-container container-fluid">
<div class="row">
<div class="col-md-5 mapContainer">
<!-- Quicksearch -->
<div id="LocationQuickSearch">
<form role="form">
<div class="form-group">
<label>Addresse</label>
<input class="form-control" id="searchAddress" v-model="searchAddress" placeholder="Bitte geben Sie eine Suchaddresse ein." v-on:focus='clearFormFields'>
</div>
</form>
</div>
<!-- GIS MAP -->
<div id="GISMap" v-el:map></div>
</div>
<!-- Form -->
<div class="col-md-7 incidentContainer">
<div class="incidentForm"> (...)
#LocationQuickSearch {
height: 100px;
width: 100%;
background-color: yellow;
padding: 10px;
clear: both;
}
// --Page Content
#page-content-wrapper {
height: 100%;
padding: 0;
background-color: red;
}
.row, .container-fluid {
height: 100%;
}
.row .mapContainer {
padding: 0px;
height: 100%;
background-color: red;
}
.row .incidentContainer {
padding: 0px;
height: 100%;
}
.incidentForm {
height: 100%;
width: 100%;
background-color: lightgray;
}