GetBoundingClientRect() returns an overflowing child as being shorter than it’s parent

I have this arrangement, where the child is overflowing it’s parent:

I would like to detect this condition; I attempted to use getBoundingClientRect(). However, I’m afraid the results have been confounding to me. The <div> (as seen by the inset rectangle) is being reported as having greater width than the <h3>. Obviously, the title “primitive” is much longer than the div which serves as it’s parent.

(child is the html element of the <h3>, and this.node refers to the <div> which constitutes the red box.)

Could someone please explain this behavior?

PS: The ultimate goal is to resize the parent node to fit arbitrary children, but I can’t get the required information into the algorithm per this problem. If someone has a CSS way to do that, I’m not in love with this method.

PS #2: I’m also curious why the child’s background color is only applied to the parent, is this related?