Flexbox列，子元素在Edge中超出范围

Question

我有一个柔性箱容器和一个孩子，孩子应该装满容器，但不要超出范围。

以下CSS在Edge以外的所有浏览器上都可以正常工作，内容超出范围

.wrapper {
   display: flex;
   flex-direction: column;
   height: 200px;
}

.child {
   flex: 1;
}

这里是stackblitz reproduction，请在Chrome和Edge上尝试一下以了解区别。

为什么支持flex-box的flex: 1在Edge上不起作用？

  

PS 。使用height: 100%可以解决此问题，但是又出现了另一个问题（仅在Edge中），水平滚动条被按下并消失了。

Chrome屏幕截图（正常工作）

边缘屏幕截图（水平滚动条在不应该被按下的情况下）

此演示使用height: 100%

https://murhafsousli.github.io/ngx-scrollbar/