IE and Edge flexbox bug?

Question

I've noticed an anomaly in Edge and IE when using flexbox with scrolling columns coupled with a horizontal scroll. The following codepen demonstrates correct functionality in Chrome and FireFox; however, there is an extra scroll bar on the very right of the view for a slight vertical overflow (the height of the horizontal scroll bar) that is only present in IE 11 and Edge:

Original Codepen Example

The raw html for reference:

<body>
  <div class="app-master">
    <div class="app-sidebar-spacer">

    </div>
    <div class="app-content">
      <div class="app-header">
        <div class="ui secondary small menu">
          <a class="right item">
            <div>
              <span>happy text</span>
            </div>
          </a>
        </div>
      </div>
      <div class="app-work-zone">

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

            <div>
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ip"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

            </div>
          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

      </div>
    </div>
  </div>
</body>

The raw css for reference:

 html,
 body {
   height: 100%;
   margin: 0;
   min-height: 100%;
   padding: 0;
 }

 .app-master {
   display: flex;
   flex-direction: row;
   height: 100%;
 }

 .app-sidebar-spacer {
   flex: 0 0 215px;
   background-color: #2959a5;
 }

 .app-content {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow-x: auto; 
 }

 .app-header {
   min-height: 43px;
 }

 .app-header>.ui.menu {
   width: 100%;
 }

 .app-work-zone {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   min-height: 0;
 }

 .app-zone-content {
   flex: 1 1 0;
   min-width: 600px;
 }

 .app-zone-buffer {
   width: 2px;
   text-align: center;
 }

 .app-zone-segment {
   height: 100%;
   overflow-y: auto;
 }

Notes:

I have semantic-ui loading in the codepen for basic styling, but the layout is developed using pure flexbox (not the semantic grid system).
Semantic ui already uses normalizer, so it is turned off in the codepen css.
In codepen I have "autoprefixer" turned on.
When viewing in IE, adjust the height of the preview window, and the preview window's vertical scroll bar will suddenly show scrolling.
All of my custom classes are prefixed with "app-".

Below are pictures of what seems to be a working implementation of this concept by the folks over at Asana; however, I am struggling to understand the implementation.

Image 1) With the window collapsed resulting in correct horizontal scrolling in Edge, no content hidden at the bottom of the screen, and no extraneous scroll bar at the very left of the view:

Image 2) With the window expanded (and no horizontal scrolling in Edge to demonstrate no content was hidden when horizontal scrolling was in effect):

So, is this actually a bug in IE and Edge, or does the seemingly functional implementation by Asana demonstrate a work around?

Edit 1) Added more in-depth description of the anomaly.

Edit 2) Added updated codepen link to track cross browser progress.

Edit 3) Updated final codepen with functional hacks. Functionality should now look identical across IE11, Edge, Chrome, and FF. The complete functional hack list is:

@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
  .app-content {
    overflow-x: scroll; 
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .app-content {
    overflow-x: scroll; 
  }
}

The following media query reverts overflow-x to auto in browsers where it was set to scroll (see hacks just above this one) when the browser width is greater than 825px. This number is derived from the 225px used for the left side-nav, and the 200 px minimum used for each flexbox item to the right of the side-nav. This prevents an extraneous horizontal scroll bar in IE11 and Edge when browser width is greater than 825px.

@media (min-width: 825px) {
  .app-content {
    overflow-x: auto;
  }
}

Final (updated with functional hacks) Codepen Example

I'm trying to understand the problem. Would you say it's similar to this? https://stackoverflow.com/questions/40024840/edge-ie-flex-and-scrollbar-issue — Michael Benjamin, Aug 25 '17 at 18:56
I make the window bigger in FF and the results is the same as your image which demonstrates the anomaly. Not sure what issue you are trying to show — Huangism, Aug 25 '17 at 18:57
Sorry about that guys. I've been looking at the problem too long and made the classic mistake of allowing my brain to fill in details. I've edited the post to clarify. Please let me know if it still isn't clear. @Michael_B, I think it is a separate issue as it is not using "column wrap" at all. — jpetitte, Aug 25 '17 at 19:26
@Huangism, your FF displays the extra far right scroll bar that only scrolls the height of the horizontal scroll bar? I can't seem to reproduce that. — jpetitte, Aug 25 '17 at 19:29
?? does `overflow-y: hidden;` instead of `overflow-x: auto;` would cure the issue ... if that was the issue ? https://codepen.io/anon/pen/MvqyEZ — G-Cyrillus, Aug 25 '17 at 19:56
@G-Cyr, Unfortunately it does not. It just eliminates the extraneous right scroll bar and hides the content covered by the horizontal scroll bar. Instead of hiding the content, it should compress the content vertically such that nothing is hidden behind the horizontal scroll bar. If that doesn't make sense written, I can post a picture for clarity. — jpetitte, Aug 25 '17 at 20:18
@Michael_B, I apologize. This is similar to the original stack overflow link you sent. I just looked at your comment instead of his question. — jpetitte, Aug 27 '17 at 00:46

Asons · Accepted Answer · 2017-08-27T08:51:22.393

1

This is obviously a bug (haven't found any bug report yet and will update when I do).

I have tested this with Edge on Windows 10 Fall Creators Update version (Microsoft EdgeHTML 16), and is now fixed and work as it should.

Here is another post about the same issue, where one workaround for IE is to use scroll instead of auto (overflow-x: scroll)

Updated based on a comment

This is an attempt to find a CSS based hack that will detect IE 11 and Edge 12-15.

This IE 11 CSS hack appears to work properly:

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .app-content {
    overflow-x: scroll; 
  }
}

For Edge this CSS hack appears proven to work:

The following hack seems to work to find Edge:

@supports (-ms-ime-align: auto) {
  .app-content {
    overflow-x: scroll; 
  }
}

Though this also catch Edge 16, but here we got lucky as Edge 16 added support for object-fit

So by simply check for both the (-ms-ime-align: auto) and (not (object-fit: cover)), we should be able to actually distinct Edge 12-15 from 16

@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
  .app-content {
    overflow-x: scroll; 
  }
}

As noted, Microsoft appears moving to remove as many -ms prefixed properties as possible in future MS Edge, though we don't mind, as we want to target the older versions that still has them

I have tested the above 2 CSS hacks with success on IE 11 and Edge 16 using this Codepen:

https://codepen.io/anon/pen/RZYeJo

If anyone find this not work on a specific Edge version, please let me know so I can keep this post up to date.

For you who prefer to use Javascript, here is a post with some interesting reading:

Instead of using prefixes I want to ask site visitors to upgrade their browser

edited Aug 27 '17 at 08:51

answered Aug 26 '17 at 07:34

Asons

84,923
12
110
165

Can we target older versions of edge using the hack here: https://stackoverflow.com/questions/32201586/how-to-identify-microsoft-edge-browser-via-css The hack seems to work for me (I added an updated codepen). I don't have access to the Fall Creators Update at the moment. Can you confirm if the hack interferes with Edge 16? I'll mark your answer as correct, but I would like to come up with a cross browser solution for the problem. – jpetitte Aug 27 '17 at 00:53
@jpetitte I updated my answer a little. Test the linked codepen and let me know how it works on your Edge. – Asons Aug 27 '17 at 08:52
Your answer is working well for me! I made one final addition to my codepen such that in this implementation (with the right sidenav placeholder using 225px horizontally, and each flexbox in the adjacent row using 200px minimum horizontally), the formatting looks identical in IE 11, Edge, Chrome, and FF no matter what the page-width is. I have explained this in edit 3 of the question. – jpetitte Aug 28 '17 at 13:47
@jpetitte Sounds great...checked the final version in my Edge ver. 16 and it works. – Asons Aug 28 '17 at 13:52
1

Excellent. Also, there is one mistake in my comment above. I said "right sidenav", when I mean "left sidenav". – jpetitte Aug 28 '17 at 13:55
@jpetitte Understood you meant that...and it is really appreciated to also get an upvote when one follow up on comments that takes extra work :) – Asons Aug 28 '17 at 14:09

IE and Edge flexbox bug?

1 Answers1

Linked