当 flex 项的宽度为 100% 时，如何计算 flex-basis？

Question

flex-basis 的初始值根据 flex 项目的内容自动调整大小。 并且内容img元素取决于父元素的width: 100% （ width: 100% ）。 换句话说，在 flex item 和 img 元素之间发生了一个无限循环的引用。

然而，事实上，正如在下面的代码片段中，处理不会随着无限循环而停止。 为什么是这样？ 浏览器（规范）如何避免无限循环？

 .row { display: flex; flex-wrap: wrap; width: 500px; background: #faf; height: 120px; } .text { background: #ffa; } img { width: 200%; }

 <div class="row post"> <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a> </div>

Answer 1

然而，事实上，正如在下面的代码片段中，处理不会随着无限循环而停止。 为什么是这样？ 浏览器（规范）如何避免无限循环？

永远不会有无限循环，规则是不要倒退。 一般来说，浏览器只会做一次无限循环的迭代。

基本上在您的情况下，您使用了width:200%所以我们需要对包含块（ .text ）的引用来计算它，但我们没有在那里定义任何宽度，因此浏览器会以某种方式忽略该宽度，这将为我们提供此输出

 .row { display: flex; flex-wrap: wrap; width: 500px; background: #faf; height: 120px; } .text { background: #ffa; } img { /*width: 200%;*/ }

 <div class="row post"> <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a> </div>

现在我们有一个包含块的宽度，我们将使用它作为图像的参考，使其宽度是.test两倍，这也是它的初始宽度。

 .row { display: flex; flex-wrap: wrap; width: 500px; background: #faf; height: 120px; } .text { background: #ffa; } img { width: 200%; }

 <div class="row post"> <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a> </div>

现在很简单，如果你使用width:100%什么都不会发生，因为所有的宽度都将保持不变。

这不是 flexbox 特有的，可能会在不同的情况下发生。

这是inline-block另一个示例：

 .text { background: #ffa; display: inline-block; height:200px; } img { width: 200%; }

 <a href="#" class="text"> <img src="https://placeimg.com/150/50/animals"> </a>

同样的逻辑在这里发生， inline-block使用图像来定义它的宽度，然后我们移动到图像并且我们不再回来。

另一个没有图像的例子：

 .text { background: #ffa; float:left; height:100px; } .img { width: 50%; background:red; }

 <a href="#" class="text"> <div class="img"> some text here</div> </a>

一些相关引用：

..有时百分比大小的框的包含块的大小取决于框本身的内在大小贡献，从而产生循环依赖。 在计算包含块的大小时，百分比表现为 auto 。

.. 包含块的大小不会根据框的结果大小重新解析； 内容可能因此溢出或下溢包含块..