一些垂直堆叠的DIV变得不可见

Question

我在HTML / CSS中构建一种具有以下结构的地图网格：

＆＃13;

＆＃13;

#map {
    position: absolute;
    top: 2vw;
    bottom: 2vw;
    left: 2vw;
    right: 2vw;
    overflow: visible;
    background : blue;
}

.map-row {
    width: 100%;
    background: white;
}

.map-row-split {
    
}

＆＃13;

<div id="map">
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
    <div class="map-row" style="height:9.8%;"></div>
    <div class="map-row-split" style="height:0.2%"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

在这种情况下，它是一个包含10行的地图，如您所见，总高度达到父亲的100％。

唯一的样式是map-row和map-row-split都有width=100%，但由于某种原因，结果隐藏了一个拆分div：

哪些拆分div消失（以及多少）取决于父级的大小，例如，这是一个较小的父级大小：

Answer 1

只需将html和body的高度设置为100%。

Answer 2

回答评论

将min-height: 1px设置为.map-row-split，因为将高度设置为像素分数可能会导致浏览器端出现一些视觉上的不一致/问题。