html – 调整视口大小后,Firefox与Chrome的div宽度变化不同

发布时间：2020-12-14 16:36:39 所属栏目：资源来源：网络整理

导读：在使用基于flexbox容器的布局缩小视口后,我注意到了一些小差异.以下代码段包含两个容器(.container和.subcontainer)中的一些链接.在Chrome(45 beta)中,无论视口尺寸如何,具有class元素的div都具有相同的宽度.但是,在Firefox(40)中,每个div的宽度根据其内容而

在使用基于flexbox容器的布局缩小视口后,我注意到了一些小差异.以下代码段包含两个容器(.container和.subcontainer)中的一些链接.在Chrome(45 beta)中,无论视口尺寸如何,具有class元素的div都具有相同的宽度.但是,在Firefox(40)中,每个div的宽度根据其内容而变化.

html,body {
     margin: 0;
     padding: 0;
   }
   .container {
     position: relative;
     display: flex;
     flex-direction: column;
     width: 50%;
   }
   .element {
     flex: 1 0 0;
     padding: 0.5em;
     text-align: center;
     position: relative;
     background-color: red;
     margin-right: 1em;
   }
   .subcontainer {
     flex: 0 1 auto;
     display: flex;
   }
   .element a {
     color: black;
   }

<!DOCTYPE html>
<html>

<body>
  <div class="container">
    <div class="subcontainer">
      <div class="element"><a>abc</a>
      </div>
      <div class="element"><a>abcdef</a>
      </div>
      <div class="element"><a>abcdef</a>
      </div>
    </div>
  </div>
</body>

</html>

我认为“运行代码段”功能不允许看到此更改,因此我提供了几个显示差异的GIF：

铬：

火狐：

正如您所看到的,这些框在Chrome中共享相同的宽度,但Firefox非常明显地限制了第一个框,其他框保持了它们的比例.这种差异的原因是什么？我该如何解决？我希望每个盒子都有相同的宽度.这就是使用flex的目的：首先是1 0 0.

谢谢

解决方法

尝试将min-width设置为您需要的任何值,或者只是0px：

.element
{
   ...
   min-width: 0px;
}

Fiddle

细节

对于Firefox,flex项目默认为min-width：min-content,如here所示

These implementations where implementing a slightly simpler behavior
for this keyword: it computed to min-content on flex items,and it
computes to 0 on everything else.

因此,如果我们为Chrome设置min-width：-webkit-min-content,它将具有相同的不需要的行为 – jsfiddle.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!