Understanding inline-block overflow element transfer behavior: hidden

Question

I want the two inline-block elements to remain on the same line, regardless of their width or margin .

A quick fix is ​​to apply white-space: nowrap to the container. Flex and floats are alternatives that also work.

I just went in cycles to define concrete behavior of wrapping by means of white-space: normal .

Here's the situation:

• There are two inline-block elements in the level container.
• The width of the container is fixed at 500 pixels.
• The width of each child is fixed at 200px.
• The container is set to overflow: hidden .

With or without white-space: nowrap , field A will never be completed. The size of its width or margin-left does not matter; Box A will just disappear in the void overflow: hidden .

Here's Box A with margin-left: 400px (the container has overflow: hidden; white-space: normal ):

Note the image above as Box B is wrapped. It did not disappear in overflow: hidden .

Here is Box B with margin-left: 250px (the container has not changed at the top, A reset field):

Here's Box B with margin-left: 400px :

Unlike Box A, Box B refuses to stay on the front line and simply hides.

So, this rule is as follows:

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

Testing this theory with the third element seems to prove its correctness:

Here is field B with margin-left: 350px and a new box C with margin-left: 350px :

So, it seems that one element cannot force the other element to respect overflow: hidden for their common parent.

Does anyone know exactly what is happening and / or where in the specification is this behavior defined?

Is it a problem of overflow, wrapping, inline block, or maybe a combination of factors?

I checked here but found nothing: https://drafts.csswg.org/css-text-3/#white-space-property

Playground

Answer 1

From my answer to this related question :

Typically, inline-level mailboxes do their best to avoid overfilling their containers as much as possible. [...]

The overflow value in the container does not affect whether its contents are full; it only changes how it and its contents are displayed when an overflow occurs.

And from spec :

Typically, the contents of a block of blocks are limited to the edges of the contents of the window. In some cases, the box may overflow, that is, its contents are partially or completely outside the field, for example:

• A row cannot be split, resulting in a row field that is larger than a block field.

This is why in white-space: normal , line break capabilities are represented by spaces, and inline-level boxes are wrapped whenever they get the opportunity. This includes embedded blocks. Boxes of the built-in level will overflow their container only if they cannot be packed for any reason. Otherwise they will be wrapped.

Since the built-in block has the same rigid physical structure as the container block field, it is impossible for the built-in block to “fall apart” or turn around when it is the only core of the linear level in this row field. This is why overflow occurs (even if the current line is not the first line) when the field cannot correspond to the boundaries of its line, for any reason, including when the horizontal field is shifted.

It is curious that the behavior of spaces without interruption with respect to embedded blocks is incompatible in different browsers . No one knows why.