嵌入式谷歌地图底部的空白区域

我是 CSS 新手，所以我从某个地方复制了这段代码来创建一个响应式嵌入式谷歌地图，但是在引入“max-height”属性之后页面底部有空白，这是以前没有的。

/* Flexible iFrame (for google maps)*/

.Flexible-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 500px;
}