为什么Flexbox在非chrome浏览器中无法正常工作？

debugcn 发表于 Dev

丹尼斯535

我在写聊天。当我用一种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;
}

丹尼斯535

要使其正常工作，应添加“ flex-basis：0;”行。进入.messages类。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。