Html 如何在container div中创建段

所以我想实现我画的以下目标：

绿色的div是外部div，在div内部，有一个div，我打算用它来绘制地图。现在我面临的问题是如何将div放置在外部div的底部？我希望它以某种方式锁定在那个位置，这样当我调整浏览器的大小时，它将保持在当前位置，并且map div不会四处移动

我尝试使用“边距顶部：59vh”，但当我调整浏览器的高度时，它溢出并变得奇怪：

如果您能在这方面提供帮助，我将不胜感激

*{
保证金：0；
填充：0；
框大小：边框框；
}
html{
身高：100%；
字体大小：1vw；
}
身体{
身高：100%；
}
#外{
边框：1px纯黑；
高度：90vh；
宽度：35%；
}
#地图组{
边框：1px纯蓝色；
高度：300px；
边际上限：59vh；
}

文件

从

#map#u div

中删除

页边距顶部：59vh

，并添加

显示：flex

，

弯曲方向：列

，和

将内容：flex end

对齐到

#外部

* {
保证金：0；
填充：0；
框大小：边框框；
}
html{
身高：100%；
字体大小：1vw；
}
身体{
身高：100%；
}
#外{
边框：1px纯黑；
高度：90vh；
宽度：35%；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
}
#地图组{
边框：1px纯蓝色；
高度：300px；
}
文件

从

#map#u div

中删除

页边距顶部：59vh

，并添加

显示：flex

，

弯曲方向：列

，和

将内容：flex end

对齐到

#外部

* {
保证金：0；
填充：0；
框大小：边框框；
}
html{
身高：100%；
字体大小：1vw；
}
身体{
身高：100%；
}
#外{
边框：1px纯黑；
高度：90vh；
宽度：35%；
显示器：flex；
弯曲方向：立柱；
证明内容：柔性端；
}
#地图组{
边框：1px纯蓝色；
高度：300px；
}
文件