title: IE and Edge flexbox bug?
body: <p>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:</p>
  
  <p><a href="https://codepen.io/jpetitte/pen/yobzry" rel="nofollow noreferrer">Original Codepen Example</a></p>
  
  <p><a href="https://i.stack.imgur.com/8bNgd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8bNgd.png" alt="enter image description here"></a></p>
  
  <p>The raw html for reference:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="app-master"&gt;
      &lt;div class="app-sidebar-spacer"&gt;
  
      &lt;/div&gt;
      &lt;div class="app-content"&gt;
        &lt;div class="app-header"&gt;
          &lt;div class="ui secondary small menu"&gt;
            &lt;a class="right item"&gt;
              &lt;div&gt;
                &lt;span&gt;happy text&lt;/span&gt;
              &lt;/div&gt;
            &lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="app-work-zone"&gt;
  
          &lt;div class="app-zone-content"&gt;
            &lt;div class="ui segment app-zone-segment"&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="app-zone-buffer"&gt;
          &lt;/div&gt;
  
          &lt;div class="app-zone-content"&gt;
            &lt;div class="ui segment app-zone-segment"&gt;
  
              &lt;div&gt;
                "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."
  
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="app-zone-buffer"&gt;
          &lt;/div&gt;
  
          &lt;div class="app-zone-content"&gt;
            &lt;div class="ui segment app-zone-segment"&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="app-zone-buffer"&gt;
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The raw css for reference:</p>
  
  <pre><code> 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&gt;.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;
   }
  </code></pre>
  
  <p>Notes: </p>
  
  <ol>
  <li>I have semantic-ui loading in the codepen for basic styling, but the layout is developed using pure flexbox (not the semantic grid system).</li>
  <li>Semantic ui already uses normalizer, so it is turned off in the codepen css.</li>
  <li>In codepen I have "autoprefixer" turned on.</li>
  <li>When viewing in IE, adjust the height of the preview window, and the preview window's vertical scroll bar will suddenly show scrolling.</li>
  <li>All of my custom classes are prefixed with "app-".</li>
  </ol>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/Io2jJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Io2jJ.png" alt="enter image description here"></a></p>
  
  <p>Image 2) With the window expanded (and no horizontal scrolling in Edge to demonstrate no content was hidden when horizontal scrolling was in effect):</p>
  
  <p><a href="https://i.stack.imgur.com/y2K8s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y2K8s.png" alt="enter image description here"></a></p>
  
  <p>So, is this actually a bug in IE and Edge, or does the seemingly functional implementation by Asana demonstrate a work around?</p>
  
  <p>Edit 1) Added more in-depth description of the anomaly. </p>
  
  <p>Edit 2) Added updated codepen link to track cross browser progress.</p>
  
  <p>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:</p>
  
  <pre><code>@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; 
    }
  }
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>@media (min-width: 825px) {
    .app-content {
      overflow-x: auto;
    }
  }
  </code></pre>
  
  <p><a href="https://codepen.io/jpetitte/pen/QMZWaP" rel="nofollow noreferrer">Final (updated with functional hacks) Codepen Example</a></p>