Понимание поведения обертывания элементов встроенного блока с переполнением: скрыто

Question

Я хочу, чтобы два элемента inline-block оставались в одной строке, независимо от их width или margin.

Быстрое решение заключается в применении white-space: nowrap к контейнеру. Flex и поплавки - это альтернативы, которые также работают.

Я просто зациклился на том, чтобы выяснить конкретное поведение обертывания с помощью white-space: normal.

Вот ситуация:

1. Есть два inline-block элементов в контейнере на уровне блоков.
2. Ширина контейнера фиксируется в 500 пикселей.
3. Ширина каждого ребенка фиксирована при 200px.
4. Контейнер установлен в overflow: hidden.

С или без white-space: nowrap, Box A не будет никогда завернуть. Размер его width или margin-left не имеет значения; Коробка А просто исчезнет в пустоте overflow: hidden.

Вот коробка А с margin-left: 400px (контейнер имеет overflow: hidden; white-space: normal):

Обратите внимание на рисунке выше, как коробка В накрутились. Это не исчезнуть в overflow: hidden.

Вот коробка В с margin-left: 250px (контейнер неизмененном сверху; коробка сброса):

Вот коробка В с margin-left: 400px:

В отличие от Box A, Box B отказывается оставаться на первой линии и просто прячется.

Так правило, кажется:

С white-space: normal, только первый элемент на линии будет уважать overflow: hidden. Последующие элементы будут обертываться, но уважать overflow: hidden на последующих строках.

Тестирование этой теории с третьего элемента, кажется, чтобы доказать это правильно:

Вот Box B с margin-left: 350px и новая коробка C с margin-left: 350px:

Таким образом, кажется, что один элемент не может заставить другой элемент уважать 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. Никто не знает, почему.