UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'. The 'visible' value when used for the viewport must be interpreted as 'auto'. The element from which the value is propagated must have a used value for 'overflow' of 'visible'.
если не вдупляешь, что такое содержащий блок, то просто добавь контейнеру 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 {}
}
}