Determining which DOM element is causing the dimensions to increase for a parent element - html

Question

I run into this problem sometimes when a site is not contained inside the mobile viewport, and I need to determine what is causing the width to exceed.
Usually I do this by trial and error of hiding different elements until the elements resets to the desired 100% width. Then I repeat for each child element until I find the one that is causing it.
Is there a way in Firefox or Chrome devtools (or using a plugin) to see which DOM child element is deciding the current elements dimensions?

Answer 1

Determining what is defining an element's calculated width and height can be quite tricky. And neither the Chrome nor the Firefox DevTools provide an easy way to get that information in all cases. And to my knowledge, there are also no extensions available that make this easier. The Firefox DevTools team started a discussion on this some time ago, though.
There are two reasons why an element might be wider or higher than expected: Some CSS or some text on the element itself or on one of its descendant elements.
When there is no other solution, the one with hiding or removing the elements is probably the fastest one.
Nonetheless, here are some tips how to use the DevTools to determine what's defining an element's width and height:
Select the element and check in the Computed side panel whether the computed value is defined via a CSS rule. Expand the entries for width or height to see what CSS rules applied. Also check min-width and max-width or min-height and max-height and the other layout related properties like margin, border, and padding but also `line-height, etc.!
Check the text within the element influences its width or height. Long words with no break opportunities like spaces can be the culprit but also CSS property definitions like white-space: nowrap.
When you've checked the above for the element itself and couldn't find the reason, the width or height is influenced by one or more descendant elements. So you need to repeat those two steps for them.
a) To quickly see the dimensions of the direct child elements, first press → to expand the element if it isn't already, then ↓ to toggle through them. While stepping through them, check their CSS and text as noted in steps 1 and 2.
b) When you see one that is as wide as the element you are observing, repeat the previous step to get one more level down in the DOM structure.
The steps mentioned above can also be automated by using some JavaScript to walk through the tree and check the element widths or heights. A relatively simple snippet for that (which can be executed in the DevTools console) is
rootElement = $0;
rootWidth = rootElement.getBoundingClientRect().width;
walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT, {
acceptNode: element =>
element.getBoundingClientRect().width === rootWidth ?
NodeFilter.FILTER_ACCEPT :
NodeFilter.FILTER_SKIP
});
currentNode = walker.currentNode;
while (currentNode) {
console.log(currentNode);
currentNode = walker.nextNode();
}
Where the $0 refers to the currently selected element.