Почему div не растянут по содержимому? ⇐ CSS

[Anonymous]

Всю свою жизнь я думал, что элемент div расширяется до размера его содержимого, если только его размеры не заданы явно или не ограничены.
html и тело не имеют ограничений по размеру — растягивайте столько, сколько хотите.
Хотелось бы понять, с каких это пор логика изменилась и расширилась до размера viewPort?
Я ошибаюсь или это ошибка?

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

html,
body {
margin: 0;
padding: 0;
}

html {
height: 100%;
}

body {
min-height: 100%;
}

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

Document

Я жду ширину #strangeSize, равную 5000 пикселей, но она была равна ширине viewPort .
Почему это проблема? Если вы хотите создать наложение поверх элемента div/изображения, мы не будем рассматривать его полностью.

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

#overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
}

.point {
position: absolute;
font-size: 10px;
font-family: sans-serif;
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 20px;
border: 2px Solid Black;
background: white;
box-sizing: border-box;
margin: -10px 0 0 -10px;
}

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

1
2
3

Я нашел решение — для #strangeSize, используя ширину: fit-content; исправляет это. Это решение относительно свежее, поскольку полная поддержка fit-content была доступна с конца 2021 года. Но почему у нас такое алогичное поведение???

Подробнее здесь: https://stackoverflow.com/questions/787 ... by-content