使用overflow：hidden来理解内联块元素的包装行为

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，方框A永远不会换行。其width或margin-left的大小并不重要;方框A将简单地消失在overflow: hidden的空白中。

此处带有margin-left: 400px的框A（容器有overflow: hidden; white-space: normal）：



请注意上图中Box B的包装方式。它没有消失在overflow: hidden。

这里的方框B带有margin-left: 250px（容器从上面不变;方框A重置）：



这里的方框B带有margin-left: 400px：



与方框A不同，方框B拒绝留在第一行而只是隐藏。

所以规则似乎是：

  

使用white-space: normal时，只有该行的第一个元素会尊重overflow: hidden。后续元素将包装但在后续行上尊重overflow: hidden。

用第三个元素测试这个理论似乎证明它是正确的：

此处带有margin-left: 350px的方框B和带有margin-left: 350px的新方框C：



所以似乎一个元素不能强迫另一个元素尊重他们共同父母的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。没有人知道为什么。