Understanding the wrapping behavior of inline-block elements with overflow:hidden

问题

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

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

I'm just stuck on figuring out a particular wrapping behavior with white-space: normal.

Here's the situation:

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

With or without white-space: nowrap, Box A will never wrap. The size of its width or margin-left doesn't matter; Box A will simply disappear into the void of overflow: hidden.

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

Notice in the image above how Box B has wrapped. It did not disappear into overflow: hidden.

Here's Box B with margin-left: 250px (container unchanged from above; box A reset):

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

Unlike Box A, Box B refuses to stay on the first line and just hide.

So the rule seems to be:

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.

Testing this theory with a third element seems to prove it correct:

Here's Box B with margin-left: 350px and a new Box C with margin-left: 350px:

So it seems that one element cannot force another element to respect overflow: hidden on their common parent.

Anybody know exactly what's going on, and/or where in the spec this behavior is defined?

Is this an issue of overflow, wrapping, inline-block, or maybe a combination of factors?

I've checked here but didn't find anything: https://drafts.csswg.org/css-text-3/#white-space-property

Playground

回答1:

From my answer to 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.

And from the 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.

This is why, in white-space: normal, line-break opportunities are presented by whitespace, and inline-level boxes will wrap at any opportunity they get. This includes inline-blocks. Inline-level boxes will only overflow their container if they cannot wrap, for any reason. Otherwise they will wrap.

Since an inline-block has the same rigid physical structure as a block container box, it's impossible for an inline-block to "break apart" or wrap when it's the only inline-level box on a given line box. This is why overflow occurs (even when the current line is not the first line) when the box cannot fit the bounds of its line box, for any reason, including when it's being offset by a horizontal margin.

Curiously, the behavior of no-break spaces with respect to inline-blocks is not consistent across browsers. No one knows why.

来源：https://stackoverflow.com/questions/35103210/understanding-the-wrapping-behavior-of-inline-block-elements-with-overflowhidde