宽度和柔韧性基准之间的差异

Dremora 发表于 Dev

德雷莫拉

我遇到了行为上的差异width，flex-basis而我无法通过flex-basis和width之间的差异进行解释？。

.outer {
  display: flex;
  background: yellow;
  padding: 10px;
}
.middle {
  display: flex;
  flex-shrink: 0;
  background: red;
  padding: 10px;
}
.inner {
  flex-basis: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;
}
.inner2 {
  width: 258px;
  flex-shrink: 0;
  display: flex;
  flex-grow: 0;
  background: green;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      hello
    </div>
  </div>
</div>

<div class="outer">
  <div class="middle">
    <div class="inner2">
      hello
    </div>
  </div>
</div>

这是说明我遇到的问题的示例。我期望两行看起来都一样，但是，当使用flex-basis（行1）时，flex容器（.middle元素）似乎忽略了其子.inner元素（元素）的固有宽度，并且只考虑了文本。

在最新版本的Chrome，FF和Safari中（但在IE11 / Edge中不是），可以观察到这种差异。

澄清：我不是在问为什么IE11 / Edge会表现出它的行为方式。在我看来，它的行为（在这种情况下）实际上是合乎逻辑的。我在问为什么其他所有浏览器都不同。

更新：Edge 13的行为类似于IE11。

德雷莫拉

这似乎是一个错误。如果元素是通过flex设置的，则既是flex容器又是flex项目的元素似乎忽略了其子元素的固有尺寸flex-basis，而是选择测量其子元素内容的宽度/高度。具有讽刺意味的是，IE11 / Edge是唯一可以正确实现此功能的浏览器。

铬虫追踪器

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

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

编辑于2021-03-3

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章