當 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 。

.. 包含塊的大小不會根據框的結果大小重新解析； 內容可能因此溢出或下溢包含塊..