Парадоксы HTML: display: inline-block

Свойство display: inline-block используется в языке для верстки вебстраниц для реализации элементов, ограниченных шириной содержащегося в них контента и, кроме того, ведущих себя практически так же, как инлайновые элементы (display: inline). Но при этом такие элементы являются блочными. Например, они могут быть расположены друг за другом в одну строку, что невозможно, в общем случае, если задано display: block.

Как определяется ширина родительского блока при заданном display: inline-block ?

Ширина родительского блока определяется, как сумма ширин блоков-потомков плюс ширины пробелов(!), если в html-коде между потомками есть текстовые узлы (например, хотя бы один пробел или перенос строки).

Например, ширина блока

 <div><div>123</div><div>456</div></div>

будет отличаться от ширины блока

 <div>
     <div>123</div>
     <div>456</div>
 </div>

Последний будет шире из-за наличия переносов строк.

Но что, если у хотя бы одного из потомков задана ширина?

Т.е. как тогда будет определяться ширина родителя? Давайте сразу посмотрим простой пример, иллюстрирующий этот нюанс. Вот такой html-код:

<div style="display: inline-block; border: 4px solid green; box-shadow: 0px 0px 0px 40px rgb(116, 116, 116);">
    <div style="min-width: 100%; border: medium solid red; display: inline-block; background-color: rgb(255, 206, 108); color: red;" contenteditable="true">qwerty </div>
  <div style="border: medium solid blue; background-color: rgb(255, 206, 108); color: blue; display: inline-block;" contenteditable="true">12345 </div>
</div>

Для убедительности, в обоих потомках задан атрибут contenteditable="true", чтобы их содержимое можно было редактировать. Вот что будет в итоге:

Как видно, ширина родительского блока (имеющего зеленую границу) равна СУММЕ ширин красного и синего блока, плюс ширина пробелов (переносов строк). Чтобы дополнительно убедиться в этом - можно попробовать вводить символы в блоки-потомки, при этом ширина родителя будет увеличиваться вне зависимости от того, в каакой именно потомок вводятся символы. Почему такое произошло?

Дело в том, что первому потомку (имеющему красный цвет) назначено свойство min-width: 100%. Т.е. получается парадокс. С одной стороны, оба потомка имеют свойство display: inline-block. С другой стороны, минимальная ширина первого должна составлять ВСЮ ширину родителя. Как поступает браузер в данной ситуации?

Вначале он честно определяет общую ширину родителя, исходя из свойств display: inline-block у обоих потомков. В данном случае ширина каждого из потомков определяется, исходя из его содержимого, т.е. исходя из контента. А потом... браузер изменяет ширину первого потомка, делая ее 100% от ширины родителя (т.е. равной его ширине). Поэтому первый потомок растягивается на 100%, тогда как второй имеет такую ширину, которая задается его контентом.

Парадокс заключается в том, что минимальная ширина первого потомка, вроде как, задана первой, а потом уже идет display: inline-block. Тем не менее, как видим, вначале применяется не она, а display. Т.е. тот факт, что минимальная ширина первого потомка равна ширине родителя, НЕ ПРИНИМАЕТСЯ во внимание при расчете общей ширины родителя. А иначе, собственно, последнюю определить было бы невозможно.

По крайней мере, такое наблюдается в браузерах Firefox≤36.

Любопытно узнать, что будет происходить в других браузерах...