Почему div не растягивается в зависимости от контента?
Ситуация приведшая к вопросу. Имеем большую картинку(или какой-то широкий блок), допустим в 2 раза шире экрана, на котором смотрим. Картинка находится на странице, на которой html, body не имеют явно указанного размера. Мы хотим разместить над картинкой какие-то интерактивные элементы. Для этого оборачиваем картинку div'ом и ожидаем, что так как div не имеет явно указанной ширины, то он примет размер контента. Но не тут-то было. Div примет ширину вьюпорта. Почему? Почему контент не влияет на ширину div?
https://jsfiddle.net/f4nztab3/1/
Как видим в примере - #strangeSize - не принимает размер широкого вложенного блока шириной 5000 пикселей, а принимает размер вьюпорта. Почему?
Нашлось решение в виде значения width: fit-content; но поддержка этого значения относительно свежая. Я всегда думал что div, если не задан конкретный размер или его ограничения, занимают или всю доступную ширину если контент меньше, или принимают размер вложенных элементов.
Так почему div не растягивается в зависимости от контента?
Ответы (1 шт):
В итоге получается, что div, не смотря на то, что ему ничто не мешает расширяться, принимает размер равный ширине родительского элемента, а она равна ширине viewPort'а, а ширина содержимого div не влияет на ширину div, т.к. он обычный блочный элемент в стандартном потоке вывода.
Решения два:
- display: inline-block; Тогда контент будет влиять на ширину блока.
- width: fit-content; Это уже более свежий вариант введёный для grid элементов.
Вообще, на мой взгляд, это не логичное поведение, т.к. ни один из блоков не имеет ограничений или фиксированных размеров, то контент должен влиять на их ширину, хотя бы на ширину документа, они же оборачивают содержимое, значит и размер должны иметь как у него. Но, видимо, у разработчиков стандарта были свои резоны так сделать. Жаль, что никто не объяснит какие.
Спасибо @Alexey Ten за участие.