宽度和柔性之间的差异 [英] Difference between width and flex-basis

问题描述

我遇到了 width 和 flex-basis 之间的行为差​​异，我无法解释弹性基础和宽度之间有什么区别？。

  .outer {display：flex;背景：黄色; padding：10px;}。middle {display：flex; flex-shrink：0;背景：红色; padding：10px;}。inner {flex-basis：258px; flex-shrink：0;显示：flex; flex-grow：0; background：green;}。inner2 {width：258px; flex-shrink：0;显示：flex; flex-grow：0; background：green;}  

 < div class = > < 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 element）似乎忽略其子元素的内在宽度（ .inner 元素），并且仅将文本考虑在内。

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

澄清：我不问为什么IE11 / Edge的行为方式。它的行为（在这种情况下）对我来说似乎是合乎逻辑的。

：Edge 13的行为与IE11一样。

解决方案

这似乎是一个错误。
如果通过 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

这篇关于宽度和柔性之间的差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！