取消显示弹性

Question

我有以下结构

<div id="1">
    <img src="targetImage">
    <div id="2">
        google maps component in here
    </div>
</div>

问题是我想使用flexbox来集中img元素。通过合并align-items和justify-content可以很容易地实现这一点并且效果很好。

问题是，我在display:flex谷歌地图上添加id="1"的那一刻消失了。

当然这是有道理的，因为谷歌地图基于不同的显示属性，可能是block。我想知道我如何能够display:initial回到div上id="2"。简单地设置它似乎不起作用。

Answer 1

为2 div

添加此内容

width: 100%;

当您将父级设置为flex时，地图容器会丢失其宽度，因为Google地图内容绝对定位。我在我工作的其中一个网站上对此进行了测试，当您将父设置为flex时，地图会消失。如果使用检查器，则可以看到弹性项目没有宽度