当弹出窗口调整大小时，滚动条旁边会出现一个空白区域

Question

我有一个带有两个面板的弹出对话框。当窗口调整大小时，它们都会调整大小并显示滚动条。但是，当窗口高度减小时，对话框的宽度似乎会自动增大（我没有指定任何与宽度相关的样式）并导致右侧面板滚动条旁边的空白区域：

滚动条旁边的空白

如果我点击左侧面板中的另一个标签然后返回，则此空白区将自动消失：
单击其他选项卡后，空格会消失，然后返回

此问题仅发生在MS Edge中。我查看了Chrome和Firefox，由于窗口高度的变化，弹出窗口的宽度不会改变，因此不会出现这样的问题。 有没有人对此有任何想法？非常感谢你！

我无法重现代码，因为它是从gwt应用程序生成的。 html和css代码通常都是这样的：

.wrapper {
	align-content: stretch;
  display: flex;
}

.menuPanel {
    padding: 10px 0;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.menuPanel > div {
		position: relative;
    padding: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: #999;
    font-size: 1.6rem;
    min-width: 120px;
}

.mainPanel {
		min-width: 200px;
    padding: 10px 0;
    max-height: 40vh;
    overflow-y: auto;
    overflow-x: hidden;
}

<div style="position: absolute; left: 50px; top:20px; background-color:grey;">
  <div style="height:auto">
    <div class="wrapper">
      <div class="menuPanel">
        <div>Type</div>
        <div>Type</div>
        <div>Type</div>
        <div>Type</div>
        <div>Type</div>
        <div>Type</div>
        <div>Type</div>
        <div>Type</div>
        <div>Type</div>
      </div>
      <div class="mainPanel">
        <div style="height: 800px">
        testtesttest
        </div>
      </div>
    </div>
  </div>
</div>