html - Edge/IE flex 和滚动条问题

Question

我在使用 flexbox 时遇到了 Edge/IE 的问题。内容可能会溢出，所以我使用overflow-x:auto。 Flex 方向是列，内容项上有 flex-grow:1，因此不需要 overflow-y。但是滚动条超出了内容。它似乎在考虑滚动条之前计算了元素的高度。只有在使用 flex-direction column, row 时才会出现此问题。

这是一个 jsfiddle，其中包含用于 overflow-x 和 -y 的滚动/自动/隐藏的不同组合:https://jsfiddle.net/o1pv3b4o/5 .

• overflow-x:auto 和 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>

和 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;
}

Answer 1

这是边缘的解决方案。感谢 Robin Rendle

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