CSS: Поиск/исправление непреднамеренного переполнения

Вы когда-нибудь испытывали разочарование при работе с CSS, пытаясь сделать свой проект полностью отзывчивым? Вы думаете, что ваш проект готов к работе, а потом обнаруживаете элемент, который вызывает переполнение тела, что приводит к горизонтальной прокрутке? Я знаю, что так и было. Я погружался в инструменты разработчика и наводил курсор на каждый элемент, проверяя, какой из них вызывает переполнение.

К счастью, существует быстрый и простой способ проверки переполнения. Просто добавьте следующий код CSS в свой проект или в инструменты разработчика:

* {
  outline: 1px solid #f00 !important;
}

Приведенный выше код добавит красный контур к каждому элементу, что позволит вам лучше увидеть их, чтобы определить виновника переполнения. Вы можете прокрутить страницу по горизонтали вправо, одновременно прокручивая ее по вертикали вниз, и заметить элементы, ширина которых превышает ширину body/viewport.

Другим, более сложным и немного продвинутым решением этой проблемы является использование JavaScript.

var docWidth = document.documentElement.offsetWidth; 

[].forEach.call(document.querySelectorAll('*'), function(el) { 
        if (el.offsetWidth > docWidth) { 
            console.info(el); 
         } 
 });

Приведенный выше код выведет в консоль фактический элемент(ы), ширина которого(ых) больше ширины документа (body/viewport).

Надеюсь, это поможет и спасибо, что прочитали!