传单地图未填充整个包装div

Question

关于HTML / bootstraps等，这是一个新手。我遇到了一个问题，即div（传单地图）没有完全填充包装div。基本上，我有一个侧边栏（可以打开和关闭）以及地图本身。

这是我的基本HTML结构：

<div class="wrapper">

    <!-- Sidebar -->
    <nav id="sidebar">
        <div class="sidebar-header">
            <h3>Genre</h3>
            <input type="radio" name = 'genre' id="allGenre" checked> All<br>
        </div>

    </nav>
    <!-- Page Content -->
    <div id="content">
        <nav class="navbar navbar-expand-lg navbar-light bg-light">
            <div class="container-fluid">
                <button type="button" id="sidebarCollapse" class="btn btn-info">
                    <i class="fas fa-align-left"></i>
                    <span>Filter Events</span>
                </button>
            </div>
        </nav>
            <!-- Map! -->
            <div id="map" style="min-width: 100vh; min-height: 100vh" pointer-events="all"></div>
    </div>
</div>

以及相关CSS的摘要：

.wrapper {
    display: flex;
    width: 100%;
    align-items: stretch;
}

#map{
}

#content{   
}

#sidebar {
    /* don't forget to add all the previously mentioned styles here too */
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
    min-width: 250px;
    max-width: 250px;
    min-height: 100vh;

}

#sidebar.active {
    margin-left: -250px;

} 

我的问题是，地图没有完全填充包装div。我已经尝试将内容div（包含地图div）设置为100vh，假设它将填充整个包装，但是没有运气。屏幕截图在这里：

您可以看到地图填充了整个内容div，但是内容div并未填充整个外部包装div，这导致了空白/空白。在保持侧边栏现有外观的同时，如何获取内容以完全填充包装？请先谢谢。

Answer 1

这是由于flexbox的魔力。您可以像这样告诉浏览器以#content元素填充剩余空间：

#content {
    flex-grow: 1;
}