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

Я хотел бы обнаружить это условие; Я попытался использовать getBoundingClientRect(). Однако боюсь, что результаты меня смутили. Сообщается, что (как видно по вставленному прямоугольнику) имеет большую ширину, чем . Очевидно, что заголовок «примитив» намного длиннее, чем элемент div, который служит его родительским элементом.

(child — это html-элемент , а this.node относится к < /code>, который представляет собой красную рамку.)
Может кто-нибудь объяснить такое поведение?
PS: Конечная цель — изменить размер родительского узла, чтобы он соответствовал произвольным дочерним узлам, но я не могу внести необходимую информацию в алгоритм для решения этой проблемы. Если у кого-то есть способ сделать это с помощью CSS, мне этот метод не понравится.
PS №2: Мне также любопытно, почему цвет фона дочернего элемента применяется только к родительскому, связано ли это?