getBoundingClientRect() inside »overflow:scroll«

Question

I would like to compute the actual size of an Element using getBoundingClientRect(). If the Element is inside a container with a given size and overflow:scroll, than result of that method differs.

FIDDLE

How can I always get the total size of the element, no matter if inside a »overflow:scroll« context or not?

Answer 1

The height is always returned correctly, so i believe its the width that you are concerned about. In that case also, your fiddle is giving you the right size of the element. Here's how -

Remember the rule - The width of the element unless specified will be 100% of the parent.

With the "default overflow" setting you are not setting the width of the parent wrapper and hence according to the rule it takes the 100% width of the parent which going up the chain will be the window width.

With "overflow hidden" and "scroll" you are adding a class "small" to wrapper div which has fixed height and width of 200px. So again applying the rule its width will be 100% of the parent which now is 200px.