且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

宽度和柔性之间的差异

更新时间:2023-10-27 12:38:04

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



Chromium错误追踪


I've encountered difference in behavior between width and flex-basis which I am not able to explain by What are the differences between flex-basis and 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>

Here is the example illustrating the problem I'm having. I'm expecting both rows to look the same, however, when using flex-basis (row 1), the flex container (.middle element) seems to ignore intrinsic width of its child (.inner element) and only takes the text into account.

This difference can be observed in the latest versions of Chrome, FF and Safari (but not in IE11/Edge).

Clarification: I'm not asking why IE11/Edge behaves the way it does. Its behaviour (in this case) actually seems logical to me. I'm asking why there is difference in all other browsers.

Update: Edge 13 behaves just like IE11.

This seems to be a bug. An element which is both flex container and flex item seems to be ignoring intrinsic dimensions of its children if they are set via flex-basis, instead choosing to measure the width/height of contents of its children instead. It is ironic that IE11/Edge is the only browser implementing this correctly.

Chromium bug tracker