Как скрыть дочерний элемент, если он полностью не вмещается в родителя?

Question

[Pipop]

https://codepen.io/GunAlv/pen/ZEQPoPZ

У меня есть меню с динамичной шириной и элементами внутри, которым запрещен перенос. У меню стоит overflow: hidden.

Мне необходимо проверять, вышел ли элемент за пределы меню (обрезалась ли хоть одна буква) — и по надобности скрывать элемент целиком. Функция checkIntoView относительно корректно отрабатывает единожды, но при resize окна элементы не скрываются, а просто обрезаются. Если перезагрузить страницу — работает. Проходиться циклом по всем элементам при ресайзе слишком дорого.

Как лучше реализовать это?

Answer 1

[Klein Maximus]

Если я правильно понял задачу, можно сделать на чистом CSS - https://codepen.io/kleinmaximus/pen/gOPEKNq

Comments

[Klein Maximus]

Хотя тут я разрешил перенос, не знаю, на сколько это критично

[Pipop]

Klein Maximus, Спасибо за ответ. Подскажите, почему элемент сразу пропадает, если не влезает в контейнер, а не обрезается?
Мне казалось, если задать menu-list__iten overflow: hidden, то он обрежется, а не пропадет полностью

[Klein Maximus]

Pipop, я добавил flex-wrap: wrap. Соответственно, теперь на следующую строчку переносится весь блок, а поскольку и высота контейнера указана, и есть overflow: hidden, то этих перенесенных блоков не видно. Только это относится не к .menu-list__item, а к .menu-list.

[Klein Maximus]

Pipop, если мой вариант подходит, отметьте его, пожалуйста, как решение. Мне будет приятно :)

[Pipop]

Klein Maximus, Шикарно, спасибо большое