Edge/IE flex and scrollbar issue

问题

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.

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

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?

Here's a sample 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;
}

来源：https://stackoverflow.com/questions/40024840/edge-ie-flex-and-scrollbar-issue

标签

html

css

flexbox

scrollbar

microsoft-edge