我遇到了一个关于 width
和 flex-basis
行为差异的问题,这个问题无法通过 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>
flex-basis
(第一行)时,弹性容器(.middle
元素)似乎忽略其子元素(.inner
元素)的内在宽度,只考虑文本。这种差异可以在最新版本的Chrome、FF和Safari中观察到(但在IE11 / Edge中未观察到)。 澄清:我不是在问为什么IE11 / Edge会表现出这样的行为。它的行为(在这种情况下)实际上对我来说似乎是合理的。我想知道为什么其他所有浏览器都有差异。 更新:Edge 13的表现就像IE11一样。