为什么 Flexbox 在非 chrome 浏览器中不能正常工作？答案

【问题标题】：Why doesn't Flexbox work correctly in not chrome browsers?为什么 Flexbox 在非 chrome 浏览器中不能正常工作？
【发布时间】：2015-10-02 18:42:54
【问题描述】：

我正在写一个聊天。当我在一个 HTML 中编写所有 DOM 模块时，它在 Chrome 中可以正常工作，但 DOM 模块在 Edge 中无法正常工作。但后来我将所有 DOM 模块移动到另一个 HTML 文件中。现在它可以在 Edge 中使用。但是现在 Flexbox 并不适用于所有浏览器。

我写了几个示例：

一个 HTML 中的所有 DOM 模块： http://plnkr.co/edit/m9oKpnV2CWJvVu9Ry3PQ?p=preview

另一个 HTML 中的 DOM 模块： http://plnkr.co/edit/n2rV8kDravia4CTNOSL5?p=preview

我不知道为什么，但在 Chrome 中，第二个示例可以正常工作，尽管在完整项目中它与 Flexbox 有问题。但是第二个示例在 Edge 中存在相同的问题。请参见第二张图片。

Edge 中的第一个示例（未加载 DOM 模块）：

Edge 中的第二个示例（“flex-basis: 0”和“flex-grow: 1”不起作用）：

Chrome 中的正确结果：

index.html:

<!DOCTYPE html>
<html>

  <head>
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link href="http://polygit.org/components/polymer/polymer.html" rel="import">

    <link rel="stylesheet" href="style.css">
  </head>

  <body>

    <div class='main-block'>
      <div class='title'>
        <span>Title</span>
      </div>

      <my-module></my-module>

    </div>

  </body>

</html>

<dom-module id="my-module">
  <template>
      <div class='messages'>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
        <div class='message'></div>
      </div>
      <div class='title'>
        <span>Bottom</span>
      </div>
  </template>

  <script>
    Polymer({
            is: "my-module" 
    });
  </script>
</dom-module>

style.css：

.main-block
{
  display: flex;
  flex-direction: column;

  border: solid 1px red;
  width: 300px;
  height: 400px;
  margin: 0 auto;
}

.title
{
  background-color: red;
  min-height: 50px;
  height: 50px;
  margin: 10px;
  text-align: center;
}

my-module
{
  display: flex;
  flex-direction: column;
  flex-basis: 0;
  flex-grow: 1;

  border: solid 1px green;
  margin: 10px;
}

.messages 
{
  flex-grow: 1;

  border: solid 1px blue;
  margin: 10px;

  overflow-x: hidden;
  overflow-y: auto;
}

.message
{
  background-color: pink;
  min-height: 50px;
  height: 50px;
  margin: 10px;
}

【问题讨论】：

新标题改了之后就大错特错了。这是因为一个问题有2个问题。

标签： css polymer flexbox custom-element html-imports

【解决方案1】：

文件polymer.html由<link rel="import">异步加载。

这就是函数调用 Polymer(...) 在 Edge 中失败的原因。由于脚本未加载，该函数尚未定义。

在 Chrome 中它会起作用，因为自定义元素是由浏览器本地（并且以不同方式）处理的。

您应该等待事件HTMLImportsLoaded 或WebComponentsReady 以确保在依赖其内容之前加载导入的 HTML 文件。

<script>
    window.addEventListener( "WebComponentsReady", function()
    {
        Polymer( {
            is: "my-module"
        } )
    } )
</script>

附录

对于 flexbox 部分，我没有 Edge，所以我无法测试，但我在 Firefox 上遇到了同样的问题，解决方案是在 my-module 的 CCS 规则中添加 overflow: hidden .

也许这适用于 Microsoft Edge：

my-module > div:first-child {
    overflow: auto ;
    flex-basis:0 ;
}

诀窍是识别需要overflow 指令的元素。

【讨论】：

是的，当我在一个 html 中编写几个 dom 模块时，HTMLImportsLoaded 事件会有所帮助。现在第一个示例在 Edge 中工作。但是在这种情况下，Flexbox 不起作用。有人知道为什么吗？
WebComponentsReady 在所有 Polymer 组件都注册后调用。
我也可以用 Firefox 重现这个问题。看我的回答。
那么按钮框也会滚动。
所以 Firefox 和 Edge 有不同的行为。我更新了我的答案。

【解决方案2】：

要让它工作，应该添加行“flex-basis: 0;”进入 .messages 类。

Polymer.js 与此无关。这是因为不同浏览器中的 Flexbox 行为不同。

【讨论】：