Не работает overflow, bootstrap 4, в чем проблема??

Question

[Даниил]

Приветствую, объясните пожалуйста, что за бред творится, проблема уже выбесила...
Суть: Делаю мобильную меню гамбургер, в Оф состоянии оно сдвинуто через translateX(100vw), на боди установил overflow-x: hidden, но как видно на скрине - меню не обрезается и в итоге окно сайта выходит за границы сайта.

Ранее такой пробелмы никогда не было, но и юзал раньше бустрап 3, вот впервые решил попробовать 4 версию и сразу какая-то фигня пошла. Уже все перепробовал, ничего не помогает

Ставил overflow-x на хедер, но тогда меню обрезается вообще полностью по все осям и Х, и Y, что за бред? почему по Y вы высоту меню обрезается-то??

Answer 1

[Adilet Zhuman]

Если вам нужно скрыть элемент не легче ли использовать display: none, а не прятать его за экран?

Comments

[Даниил]

тогда анимация (плавный выезд) средствами css не будет работать... а через js ее гемор делать..

[Adilet Zhuman]

Даниил, тогда по пробуйте задать ширину для родителя с менюшкой и уже ему задать overflow: hidden
Пример ТЫК

[sergski]

не flex: 1; попробуйте flex: 0 1 40%; (вместо 40% укажите свою ширину)

Answer 2

[Сергей delphinpro]

Отвечу только на последний вопрос

Ставил overflow-x на хедер, но тогда меню обрезается вообще полностью по все осям и Х, и Y, что за бред? почему по Y вы высоту меню обрезается-то??

Если вы задаёте свойство overflow, неважно, по одной оси, или по обеим, то контент в любом случае будет обрезан. Вы можете лишь контролировать как он будет обработан — обрезан (hidden), либо появится полоса прокрутки (scroll/auto). Значение visible заданное лишь по одной оси не сработает.

Касаемо основного вопроса — лучше бы приложили пример в песочнице, чем скриншоты. Вероятность получения ответа существенно возросла бы.