使用溢出理解内联块元素的包装行为：隐藏

Question

我希望两个 inline-block 元素保持在同一行，无论它们的 width 或 margin 是什么。

快速解决方案是将white-space: nowrap 应用于容器。 Flex 和浮动是也可以使用的替代方案。

我只是坚持使用white-space: normal 找出特定的包装行为。

情况如下：

1. 块级容器中有两个inline-block 元素。
2. 容器的宽度固定为500px。
3. 每个孩子的宽度固定为 200 像素。
4. 容器设置为overflow: hidden。

无论有没有white-space: nowrap，框A 永远不会换行。其width 或margin-left 的大小无关紧要；框 A 将直接消失在 overflow: hidden 的空白中。

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

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

这是带有 margin-left: 250px 的框 B（容器与上面未更改；框 A 重置）：

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

与框 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。没有人知道为什么。