使用 VW/VH 时，iframe 位置在一侧无响应，间距不一致

问：

我在我的登录页面上包含了另一个页面的 iframe，它位于左侧菜单栏旁边。我把两者封闭在一个 div 容器中，并制作了一个网格。菜单栏 div 本身有一个嵌套网格。

在 iframe 的“左侧”位置使用 vh 单元时，菜单栏和 iframe 之间的间距是一致的，但 iframe 的右侧相对于整个页面不一致。

当我使用大众时，右侧是一致的，但菜单栏和 iframe 之间的空间不一致。

因此，如果屏幕的宽度小于我的宽度，则 iframe 将与菜单重叠，或者 iframe 将被截断。

如果高度小于我的高度，则菜单栏和 iframe 之间的空间很大，或者右侧的空间很大。

我希望菜单栏和 iframe 之间的空间以及页面边缘和 iframe 之间的空间保持一致，无论纵横比如何。

我尝试调整容器网格中的间隙和填充，为两侧的 iframe 添加透明边框，添加“右”位置值，更改位置类型，尝试删除菜单栏上的网格，将 iframe 封闭到 div 中，但它没有引起任何重大变化。

html格式：

<div class="menu-screen-container">
  <div class="menu">
    <img src="elements/menu.png">
    <div class="menu-elems">
        <img src="elements/1.png">
        <img src="elements/2.png">
        <img src="elements/3.png">
        <img src="elements/4.png">
        <img src="elements/5.png">
   </div>
  </div>
<iframe class="work" src="work.html"></iframe>
</div>

css：

.menu {
    position: relative;
    top: 17vh;
    left: 1vw;
}

iframe {
    width: 83vw;
    height: 83vh;
    position:relative;
    left: 32vh;
    top: 14vh;
}

.menu-screen-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    padding: 0vh 10vh 20vw 1vw;
    gap: 0vw;
    position: relative;
    width: 10vw;
    height: 100vh;
    right: 3vh;
    bottom: 9vh;
    justify-content: space-between;