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

Question

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

我写了几个样本：

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

DOM-另一个 HTML 中的模块： 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;
}

Answer 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 中遇到了同样的问题，解决方案是在中添加 overflow: hidden my-module.

的 CCS 规则

也许这适用于 Microsoft Edge：

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

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

Answer 2

要使其正常工作，应将行 "flex-basis: 0;" 添加到 .messages class.

Polymer.js是没有关系的。这是由于不同浏览器中的不同 Flexbox 行为。

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

Why doesn't Flexbox work correctly in not chrome browsers?

css

flexbox

polymer

custom-element

html-imports