我正在使用Bootstrap和传单来构建网络地图，并且希望该地图覆盖页面上主容器的整个高度。到目前为止，我在Firefox中工作，但在Chrome或Safari中工作。
我有一个带有<body>的min-height: 100vh，在里面有一个带有<main>的flex: 1 0 auto标签，以便<main>元素始终填充<nav>和<footer>之间的空间。
在<main>内，我有<div class="container-fluid h-100">，我希望它具有<main>的高度，并且在容器内，我有<div id="map" class="h-100">，我希望它具有容器的高度。
这在Firefox中可以正常工作：container with height containing map，但不在Chrome或Safari中：container with height 0 and no visible map。
[我已经看到，与基于百分比的高度有关的大多数问题是由于父元素没有高度引起的，但是这里不是这种情况，即使在Chrome中，<main>元素也具有高度：<main> with height。
这与<main>标记上设置的flex属性有关，并且其高度在不同浏览器中的评估方式不同吗？
这是我使用的完整HTML框架：
<main>和相关的CSS：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body class="bg-dark">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="/"></a>
<button class="navbar-toggler navbar-dark border-0" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-expanded="false" aria-label="Toggle navigation menu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="nav-content">
<ul class="navbar-nav align-items-center">
<li class="nav-item ">
</li>
<li class="nav-item ">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
<li class="nav-item ">
</li>
</ul>
</div>
</nav>
<main>
<div class="container-fluid h-100">
<div id="map" class="h-100"></div>
</div>
</main>
<footer>
</footer>
</body>
</html>
任何帮助将不胜感激。
在我弄乱了之前询问。添加以下CSS可以解决此问题：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1 0 auto;
}
我不完全理解为什么这样做有效，所以如果有人有解释，我很乐意接受更完整的答案。