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

我希望两个内联块元素保持在同一行,无论它们的宽度或边距如何.

快速解决方案是将white-space：Nowrap应用于容器. Flex和浮子也是可行的替代品.

我只是坚持用白色空间找出一个特定的包装行为：正常.

情况如下：

>块级容器中有两个内联块元素.
>容器的宽度固定为500px.
>每个孩子的宽度固定为200px.
>容器设置为overflow：hidden.

有或没有白色空间：Nowrap,盒子A永远不会包裹.它的宽度或边距的大小无关紧要;方框A将简单地消失在溢出的空隙中：隐藏.

这是带边距左边的方框A：400px(容器有溢出：隐藏;空白：正常)：

请注意上图中Box B的包装方式.它没有消失在溢出中：隐藏.

这里是边框左边的方框B：250px(容器从上面不变;方框A重置)：

这是左边边框B：400px：

与方框A不同,方框B拒绝留在第一线而只是隐藏.

所以规则似乎是：

With white-space: normal,only the first element on the line will respect overflow: hidden. Subsequent elements will wrap but respect overflow: hidden on subsequent lines.

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

这里是B区左边缘：350px和新边框C左边距：350px：

所以似乎一个元素不能强制另一个元素尊重溢出：隐藏在它们的共同父元素上.

任何人都知道究竟发生了什么,和/或规范中这个行为的定义在哪里？

这是溢出,包装,内联块或可能是多种因素的组合问题吗？

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

Playground

解决方法

从我对 this related question的回答：

Generally,inline-level Boxes do their best to avoid overflowing their containers as much as possible. […]

The value of overflow on a container doesn’t influence whether or when its contents overflow; it only changes how it and its contents are rendered,when overflow does occur.

从spec开始：

Generally,the content of a block Box is confined to the content edges of the Box. In certain cases,a Box may overflow,meaning its content lies partly or entirely outside of the Box,e.g.:

• A line cannot be broken,causing the line Box to be wider than the block Box.

这就是为什么在白色空间中：正常的换行机会是由空格呈现的,并且内联级别的盒子将在他们获得的任何机会中包装.这包括内联块.如果由于任何原因无法包装,内联级别的盒子只会溢出容器.否则他们会换行.

由于内联块具有与块容器盒相同的刚性物理结构,因此当它是给定线框上唯一的内联级框时,内联块不可能“分离”或换行.这就是为什么当盒子无法适应其线框边界时出现溢出(即使当前行不是第一行),出于任何原因,包括当它被水平边缘偏移时.

奇怪的是,相对于内联块的不间断空间的行为是not consistent across browsers.没有人知道原因.