瞭解具有溢出的嵌入塊元素的包裝行爲：隱藏

Question

我希望兩個inline-block元素保留在同一行上，而不管它們的width或margin。

快速解決方案是將white-space: nowrap應用於容器。 Flex和浮標也是可行的替代方案。

我只是想找出一個特定的包裝行爲white-space: normal。

這裏的情況：

1. 有一個塊級容器中的兩個inline-block元素。
2. 容器的寬度固定爲500px。
3. 每個孩子的寬度固定爲200px。
4. 容器設置爲overflow: hidden。

不管有沒有white-space: nowrap，框一種永遠不會換行。其width或margin-left的大小無關緊要;框A將簡單地消失在overflow: hidden的空白中。

這裏的方框A與margin-left: 400px（容器具有overflow: hidden; white-space: normal）：在圖像中

注意上面盒B已經如何纏繞。它沒有消失到overflow: hidden。

這裏的乙欄與margin-left: 250px（容器從上面不變;框的復位）：

這裏的乙欄與margin-left: 400px：

不同於盒A，箱乙拒絕留在第一行並隱藏。

這樣，規則似乎是：

隨着white-space: normal，只有上線的第一個元素會尊重overflow: hidden。後續元素將在後續行中包裝但尊重overflow: hidden。

測試這一理論的第三元素似乎證明它正確的：

這裏是乙欄與margin-left: 350px和新箱C與margin-left: 350px：

如此看來，一個元素不能強制另一個元素在其公共父級上遵守overflow: hidden。

任何人都知道到底發生了什麼，和/或規範中的這個行爲是在哪裏定義的？

這是一個溢出問題，包裝問題，內嵌塊問題還是其他因素的組合？

我在這裏檢查，但沒有發現任何東西： https://drafts.csswg.org/css-text-3/#white-space-property

Playground

Answer 1

從我的回答this related question：

一般來說，行內盒盡最大努力去避免儘可能地溢出他們的容器。 [...]

的overflow一個容器上的值不影響是否或當其內容溢出;它只會改變它和它的內容是如何呈現的，當溢出確實發生了。

而且從spec：

通常，塊框的內容被限制在框的內容邊緣。在某些情況下，盒子可能會溢出，這意味着它的內容部分或全部位於盒子外部，例如：

• 一條線不能斷開，導致線框比塊框寬。

這就是爲什麼，在white-space: normal，斷行機會由空格呈現，和行內框將在他們得到任何機會包裹。這包括內聯塊。內聯級別的框只會溢出其容器，如果他們不能由換行，出於任何原因。否則，他們會包裝。

由於內聯塊與塊容器盒具有相同的剛性物理結構，因此當內聯塊是給定線框上唯一的內聯級框時，內聯塊不可能「分離」或換行。這就是爲什麼出現溢出（即使當前行不是第一行）當出現任何原因（包括當它被水平邊距偏移時）不能滿足其行框邊界時會發生溢出的原因。

奇怪的是，不間斷空間相對於內聯塊的行爲是not consistent across browsers。沒有人知道爲什麼。