если не вдупляешь, что такое содержащий блок, то просто добавь контейнеру overflow: hidden;
и выбирай что-то одно, зачем тебе абсолютное позиционирование и тут же transform: translateX ?
то transform: translateX - тебе не нужен там, просто сделай блоку right: 300px; так как ширина твоего блока 300 пикселей
overflow: hidden
на body вообще не дает никакого эффекта. Но срабатывает для html или .container border: min(1px, 1px + 1vw) solid #fff; /* => border:solid #fff; */
width: min(1px, 1px + 1vw) /* => width: min(1px, 1px 1vw); */
width: min(1px, 1px + 1vw); /* => width:min(1px,1px+1vw); */
transition-delay: 0s; /* => transition-delay:0 */
.x {
width: min(1px, 1px + 1vw);
border: min(1px, 1px + 1vw) solid #fff;
transition-delay: 0s;
}
@supports (font-size: 1px) {
@media (min-width: 1px) {
.x {}
}
}
Выше я уже писал, что почему-то overflow: hidden на body не работает.
Из документации
Таким образом, если у html установлено значение overflow: visible, а оно такое по умолчанию, то у body будет то же overflow: visible
Отсюда в хроме горизонтальный скрол. Firefox живет по своим правилам, судя по всему.
Дело раскрыто