GoogleMaps перекрывается Div контейнер

Question

Я создал эту страницу структуру:

https://jsfiddle.net/rwmtr8hL/

<div id="page-content-wrapper"> 
    <div class="content-container group 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> 
     </div> 
    </div> 
</div> 

Но карта в ид GISMap перекрывает охватывающую GISMap контейнер. Как я могу настроить это?

Javascript

#wrapper { 
    width: 100%; 
    height: 100%; 
    padding-left: 250px; 
} 

// --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; 
} 

/* Float Clearfix ------------------------------ */ 
.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

#GISMap { 
    height: 100%; 
} 

#LocationQuickSearch { 
    height: 100px; 
    width: 100%; 
    background-color: yellow; 
    padding: 10px; 
    clear: both; 
} 

ПЕРЕД OVERFLOW

Answer 1

Чтобы решить ваш вопрос задать этот CSS свойства для родительского DIV:

height: 100vh; 
    display: flex; 

и удалите свою линию, где вы установили высоту на 100%, первая строка выше установит высоту до 100 процентов окна просмотра. Вторая строка позволит вашему div развернуть размер с содержимым внутри него.