Почему ширина элемента div снизится до 0, если у него нет полей или отступов? ⇐ CSS

[Anonymous]

У меня есть div заголовка и div контента. Заголовок плавающий: слева и ширина: 100%. Содержимое отображается: блокируется и переполняется: автоматически. Ширина содержимого div сворачивается до 0 и остается справа от заголовка. Он не будет течь снизу.

Код: Выделить всё

Header
Content

Код: Выделить всё

.header {
float: left;
width: 100%;
}

.content {
display: block;
overflow: auto;
}

Однако, если я добавлю поля: 1px или отступ: 1px к .content, он вырастет до своей автоматической ширины и будет перемещаться под . заголовок
Stackblitz, чтобы показать мою проблему
Почему это так? В div есть контент, так что же такого в полях и отступах, которые помогают ему увеличиться до ширины?
Кроме того, это работает, если я устанавливаю видимость переполнения, но из этого ответа я узнал, что это происходит потому, что переполнение: auto устанавливает новый контекст потока блоков.
И еще мой вопрос: после обновления до Webkit 18.2 поля теперь не будут фиксировать ширину. Только заполнение позволит элементу вырасти до полной ширины.
После некоторых исследований я предположил, что это потому, что WebKit внес некоторые изменения в свой интеллект рендеринга. Однако я пока не могу найти никаких подробностей об изменениях, которые они внесли в примечаниях к выпуску 18.2 или где-либо в Интернете.
Я знаю, как исправить ошибку, но хочу знать, ПОЧЕМУ . До версии 18.2 все работало нормально, потому что у содержимого были поля, но не было отступов. Теперь в версии 18.2 он не работает, если у него нет отступов.

Подробнее здесь: https://stackoverflow.com/questions/793 ... or-padding