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>

但是id 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;
}

在溢出之前

Answer 1

要解决您的问题，请为您的父div设置此CSS属性：

  height: 100vh;
  display: flex;

并删除您将高度设置为100％的行，上面的第一行将高度设置为视口的100％。第二行将允许你的div扩展其内部的内容。