Edge/IE Flex和滚动条问题 [英] Edge/IE flex and scrollbar issue

问题描述

使用flexbox时，Edge/IE遇到问题.内容可能溢出，因此我使用overflow-x: auto.伸缩方向是列，内容项上带有flex-grow:1，因此不需要y溢出.但是滚动条位于内容上方.看来它在考虑滚动条之前就计算了物品的高度.仅当使用弹性方向列时，该问题才会出现，行可以正常工作.

I encounter a issue with Edge/IE when using flexbox. The content may overflow, so I use overflow-x: auto. Flex direction is column, with flex-grow:1 on content items, so overflow-y should not be needed. But the scrollbar goes above the content. It seems it computes the items height before considering the scrollbar. The issue occurs only when using flex-direction column, row works correctly.

这是一个jsfiddle，它具有针对scroll-x和-y的滚动/自动/隐藏的不同组合: https://jsfiddle.net/o1pv3b4o/5 .

Here's a jsfiddle with different combinations of scroll/auto/hidden for overflow-x and -y: https://jsfiddle.net/o1pv3b4o/5.

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

• overflow-x:auto with overflow-y:hidden: horizontal scrollbar hides the content.
• overflow-x: scroll: solves the problem, it correctly computes height while taking the scrollbar into account. But the content may not overflow, thus displaying a disabled scrollbar.
• overflow-x: auto: works when using overflow-y: scroll|auto. But in both cases it displays a disabled vertical scrollbar.

有什么方法可以使它正确地计算高度而又不显示不必要的滚动条?

Is there any way to make it correctly computes heights while not displaying unnecessary scrollbars?

以下是示例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;
}

推荐答案

以下是edge .Credit的解决方案Robin Rendle

Here is the solution for edge .Credit to Robin Rendle

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

这篇关于Edge/IE Flex和滚动条问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！