0

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;
}
Antoine
  • 5,055
  • 11
  • 54
  • 82
  • Looks like a browser bug. You should be aware that there are several problems with flexbox `column wrap`. See [**here**](http://stackoverflow.com/q/33891709/3597276), [**here**](http://stackoverflow.com/q/39095473/3597276), [**here**](http://stackoverflow.com/q/39617628/3597276) and [**here**](http://stackoverflow.com/questions/34480760/is-it-possible-for-the-items-in-a-flexbox-container-that-wraps-in-rows-to-align) – Michael Benjamin Oct 13 '16 at 15:29
  • Were you able to solve your issue? We're looking at a similar problem here: https://stackoverflow.com/questions/45887710/ie-and-edge-flexbox-bug/45893077#45893077 and `overflow-x: scroll` seems to fix it. Does using that still cause problems for you? – jpetitte Aug 27 '17 at 01:06
  • Antoine, my answer here https://stackoverflow.com/a/45893077/2827823 might be a cross browser solution for you. Let me know and I'll link these 2 posts. – Asons Aug 27 '17 at 08:57

1 Answers1

1

Here is the solution for edge .Credit to Robin Rendle

html {
  -ms-overflow-style: -ms-autohiding-scrollbar;
}
David Japan
  • 232
  • 1
  • 3