Edge/IE Flex 和滚动条问题

我在使用 Flexbox 时遇到了 Edge/IE 的问题。内容可能会溢出，所以我使用overflow-x: auto。 Flex 方向为列，其中flex-grow:1在内容项上，因此不需要overflow-y。但滚动条位于内容上方。看来它在考虑滚动条之前计算了项目的高度。仅当使用 flex-direction 列、行正常工作时才会出现此问题。

这是一个 jsfiddle，具有用于溢出 x 和 -y 的滚动/自动/隐藏的不同组合：https://jsfiddle.net/o1pv3b4o/5 https://jsfiddle.net/o1pv3b4o/5.

• overflow-x:auto with overflow-y:hidden：水平滚动条隐藏内容。
• overflow-x: scroll：解决了问题，它在考虑滚动条的同时正确计算高度。但内容可能不会溢出，从而显示禁用的滚动条。
• overflow-x: auto: 使用时有效overflow-y: scroll|auto。但在这两种情况下，它都会显示禁用的垂直滚动条。

有没有办法让它正确计算高度，同时不显示不必要的滚动条？

下面是一个 HTML 示例：

<div class='ctnr'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

and CSS:

.ctnr {
  display: flex;
  flex-flow: column wrap;
  background: orange;
  width: 400px;
  height: 225px;
  margin: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
}
.ctnr div {
  min-height: 80px;
  flex: 1 1 auto;
  width: 45%;
  margin: 0;
  border: 1px solid blue;
  background: lightblue;
}

这是边缘的解决方案。归功于Robin Rendle

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}