了解使用 Overflow:hidden 的内联块元素的换行行为

我想要两个inline-block元素保留在同一行，无论它们如何width or margin.

快速解决方案是申请white-space: nowrap到容器。 Flex 和 float 是同样有效的替代方案。

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

情况是这样的：

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

有还是没有white-space: nowrap，盒子 A 永远不会包装。其尺寸width or margin-left没关系；盒子A将会消失在虚空中overflow: hidden.

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

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

这是 B 框margin-left: 250px（容器与上面相同；A 框重置）：

这是 B 框margin-left: 400px:

与 A 区不同的是，B 区拒绝留在第一线并只是隐藏起来。

所以规则似乎是：

With white-space: normal，只有该行的第一个元素才会受到尊重overflow: hidden。后续元素将换行但尊重overflow: hidden在后续行中。

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

这是 B 框margin-left: 350px和一个新的 Box Cmargin-left: 350px:

所以看来一个元素不能强迫另一个元素尊重overflow: hidden他们共同的父母。

有人确切知道发生了什么，和/或在规范中定义了这种行为吗？

这是溢出、换行、内联块的问题，还是多种因素的组合？

我在这里检查过但没有找到任何东西：https://drafts.c​​sswg.org/css-text-3/#white-space-property https://drafts.csswg.org/css-text-3/#white-space-property

操场 https://jsfiddle.net/bgqshs0o/1/

从我的回答到这个相关问题 https://stackoverflow.com/questions/33395838/why-are-these-inline-block-divs-wrapping-to-the-next-line-inspite-of-their-paren/33396321#33396321:

一般来说，内联水平盒子会尽力避免容器溢出。[...]

的价值overflow在容器上不影响whether or when其内容溢出；它只会改变它及其内容在溢出时的呈现方式does occur.

并从spec https://www.w3.org/TR/CSS21/visufx.html#overflow-clipping:

通常，块框的内容仅限于框的内容边缘。在某些情况下，盒子可能会溢出，这意味着其内容部分或全部位于盒子之外，例如：

• 一条线不能被打断，导致行框比块框宽。

这就是为什么，在white-space: normal，换行机会由空格提供，内联级框将在任何机会换行。这包括内联块。内联水平框只有在以下情况下才会溢出其容器：cannot出于任何原因包装。否则它们会包裹起来。

由于内联块具有与块容器盒相同的严格物理结构，因此当内联块是给定行盒上唯一的内联级盒时，它不可能“分解”或换行。这就是为什么当框由于任何原因（包括当它被水平边距偏移时）无法容纳其行框的边界时会发生溢出（即使当前行不是第一行）的原因。

奇怪的是，不间断空格相对于内联块的行为是跨浏览器不一致 https://stackoverflow.com/questions/25041857/why-do-inline-blocks-break-after-non-breaking-space/25043312#25043312。没有人知道为什么。