IE 和 Edge flexbox 错误？

Question

我注意到在 Edge 和 IE 中使用带有滚动列和水平滚动的 flexbox 时出现异常。以下代码笔演示了 Chrome 和 FireFox 中的正确功能；但是，视图的最右侧有一个额外的滚动条，用于轻微的垂直溢出（水平滚动条的高度），仅存在于 IE 11 和 Edge 中：

Original Codepen Example

原始html供参考：

<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>

原始css供参考：

 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;
 }

备注：

我在 codepen 中加载了基本样式的语义-ui，但布局是使用纯 flexbox（不是语义网格系统）开发的。
语义 ui 已经使用规范化器，因此在 codepen css.
我在 codepen 中打开了 "autoprefixer"。
在IE中查看时，调整预览window的高度，预览window的垂直滚动条会突然出现滚动
我所有的自定义类都以 "app-" 为前缀。

下面的图片似乎是 Asana 的人们对这一概念的有效实施；但是，我很难理解实现。

图片 1) window 折叠导致 Edge 中正确的水平滚动，屏幕底部没有隐藏内容，视图最左侧没有多余的滚动条：

图片 2) window 展开后（Edge 中没有水平滚动，表明水平滚动有效时没有隐藏内容）：

那么，这实际上是 IE 和 Edge 中的错误，还是 Asana 看似功能性的实现证明了解决方法？

编辑 1) 添加了更深入的异常描述。

编辑 2) 添加了更新的代码笔 link 以跟踪跨浏览器的进度。

编辑 3) 使用功能黑客更新了最终代码笔。功能现在在 IE11、Edge、Chrome 和 FF 中看起来应该是相同的。完整的功能黑客列表是：

@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; 
  }
}

当浏览器宽度大于 825px 时，以下媒体查询在设置为滚动的浏览器中将 overflow-x 恢复为 auto（请参阅上面的 hack）。这个数字来自用于左侧导航的 225px，以及用于侧导航右侧每个 flexbox 项目的最小 200px。当浏览器宽度大于 825px 时，这可以防止在 IE11 和 Edge 中出现无关的水平滚动条。

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

Final (updated with functional hacks) Codepen Example

Answer 1

这显然是一个错误（尚未发现任何错误报告，当我发现时会更新）。

我已经在 Windows 10 Fall Creators Update 版本 (Microsoft EdgeHTML 16) 上使用 Edge 对此进行了测试，现在已修复并可以正常工作。

这是关于同一问题的 another post，其中 IE 的一种解决方法是使用 scroll 而不是 auto (overflow-x: scroll)

根据评论更新

这是试图找到一个基于 CSS 的黑客攻击，它将检测 IE 11 和 Edge 12-15。

这个 IE 11 CSS hack 似乎工作正常：

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

对于 Edge，这个 CSS hack 似乎被证明有效：

以下 hack 似乎可以找到 Edge：

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

虽然这也适用于 Edge 16，但在这里我们很幸运，因为 Edge 16 添加了对 object-fit

的支持

因此，通过简单地检查 (-ms-ime-align: auto) 和 (not (object-fit: cover))，我们应该能够真正区分 Edge 12-15 和 16

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

如前所述，Microsoft 似乎打算在未来的 MS Edge 中删除尽可能多的 -ms 前缀属性，但我们并不介意，因为我们希望针对的是旧版本还有他们

我已经使用此 Codepen 在 IE 11 和 Edge 16 上成功测试了上述 2 CSS 黑客：

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

如果有人发现这不适用于特定的 Edge 版本，请告诉我，以便我可以使此 post 保持最新。

对于喜欢使用 Javascript 的你，这里有一个 post 和一些有趣的读物：

IE 和 Edge flexbox 错误？

IE and Edge flexbox bug?

css

internet-explorer

flexbox

microsoft-edge