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

丹尼斯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] 删除。

编辑于 2021-04-4

我来说两句

0 条评论

登录后参与评论

SCSS 中的 Flexbox 在 Firefox 上正常工作，但在其他浏览器（例如 Chrome、Edge 等）上无法正常工作

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

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

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用