Html flex容器内的传单地图不会显示

我想在flex容器中显示一个传单地图，以便在显示/隐藏父容器中的其他（最初隐藏）元素时轻松调整地图的大小。这就是我正在做的

• 我有一个flex容器，其中堆叠了两个div元素——默认情况下占据相同的高度
• 下半部分包含一个图像
• 上半部分包含实际映射，该映射将在动态添加的div元素中创建
• 还有第三个flexdiv元素infoBox，它最初是隐藏的。最终的想法是，当infoBox上设置了

  display:flex

  时，它会导致其他内容缩小（理想情况下会消失，但看起来Flexbox不会这样做）

这个想法目前失败的地方是，我根本无法让地图显示在第一位。在Chrome开发者控制台中检查添加的imap元素，发现其高度固定在0

这几乎肯定与我使用的是flex容器而不是固定高度的容器有关。然而，我无法找到解决这个问题的办法。我怎样才能使它按预期工作

var imap=document.createElement（'div'）；
imap.id='imap'；
document.getElementById（'mapBox'）.appendChild（imap）；
var lmap=L.map（'imap'，{center:[51.510067，-0.133869]，zoom:10}）
#容器
{
显示器：flex；
弯曲方向：柱反向；
最小高度：400px；
}
#picBox
{
弹性：5；
背景图片：url(https://placeimg.com/1000/1000/tech);
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
#地图盒
{
弹性：5；
位置：相对位置；
边框：1px纯红；
}
#信息箱
{
弹性：20；
边框：1px纯蓝色；
显示：无；
}


Stackoverflow真的很酷！
这里的主要问题是动态创建的
div
，id
imap

它渲染为标准的
div
，占据其父级的全部宽度，但由于它没有任何内容（贴图渲染为绝对定位元素），因此其高度为0

您可以将
mapBox
设置为flex容器，以便使用脚本创建的
imap
元素将拉伸并填充其父元素

堆栈片段


var imap=document.createElement（'div'）；
imap.id='imap'；
document.getElementById（'mapBox'）.appendChild（imap）；
var lmap=L.map（'imap'，{center:[51.510067，-0.133869]，zoom:10}）
#容器
{
显示器：flex；
弯曲方向：柱反向；
最小高度：400px；
}
#picBox
{
弹性：5；
背景图片：url(https://placeimg.com/1000/1000/tech);
背景尺寸：封面；
背景重复：无重复；
背景位置：中心；
}
#地图盒
{
弹性：5；
位置：相对位置；
边框：1px纯红；
显示：flex；/*已添加*/
}
#地图盒>分区
{
柔性：1；/*已添加，填充父级宽度*/
/*对齐项目：拉伸；默认为父项的填充高度*/
}
#信息箱
{
弹性：20；
边框：1px纯蓝色；
显示：无；
}

Stackoverflow真的很酷！
如果您的映射最初是隐藏的，并且它的容器元素在一段时间后（或在一些交互之后）显示，则可能需要运行
map.invalidateSize（）

见例