Debugging Unwanted Scrollbars

It happens often that when an element overflows, its parent element ends up getting an undesirable scrollbar. To help debug such scrollbars due to overflow, DevTools already has the [scroll] inspector-badge in the Markup View, which allows a developer to detect which elements are scrollable or have a scrollbar.

However, this alone is not sufficient for debugging what causes the scrollbars to appear in the first place.

When debugging an unwanted scrollbar, a developer should be able to swiftly get rid of the unwanted scrollbar. One way to achieve this end-goal, is the following:

1. Show the developer the innermost descendant element(s) which overflow(s) and cause the appearance of the scrollbar.
2. Let the developer use other available tools to fix the unwanted scrollbar, as the information present to the developer when the above step completes should be sufficient to quickly fix the unwanted scrollbar.

This proposal proposes implementing the above feature in the DevTools arsenal.