Html <div>动态调整大小，令人讨厌的行为

Question

我是网络开发的新手，我在HTML中有以下内容：

<div id="map" style='width: 97vw; height: 76vh;
max-width:100%;
max-height:100%;
left: 0px;
top: 0px;
border-radius: 6px 6px 6px 6px;'></div>

我试图让div部分自动调整自己，如前所述，并使用vw，vh似乎是最简单的解决方案。

然而，当我拉伸页面的宽度时，我会“跳跃”，它不会自动连续自动调整。

这是在拉伸之前：

这只是在伸展一点之后：

我正在努力保持代码清洁，因此最好只使用html解决这个问题（但我仍然会使用javascript，css等，如果它们提供更快/更好的解决方案）。

我的目标是让这张地图总是从整个屏幕结束前的10px结束，并在用户拉伸页面时连续调整其大小。最好的方法是什么？

注意：我知道之前已经多次讨论过类似的主题并且我已经完成了他们的内容。但是我不认为这是重复的，因为我更关注图像中描述的“跳跃”等细节，并且我希望相对于屏幕的末尾有一个特定的结尾，而不仅仅是填充页面或拥有它的比例。