Why is the overflow-x:hidden y direction also hidden??

http://js.jirengu.com/naroyir.

Why does the parent element set overflow-x:hidden, but the parts beyond the y direction also hidden

<div class="demo"></div>
div{
  width: 64px;
  height: 30px;
  background: -sharpd9dadb;
  position: relative;
  overflow-x: hidden;
}
div::after {
    content: "";
    position: absolute;
    height: 36px;
    width: 44px;
    background: -sharp676b6f;
    top: -3px;
    left: 10px;
    transition: transform 0.5s ease;
/*     animation: 1s swapHor infinite; */
  }

@keyframes swapHor {
  0% {transform: translate3d(0px, 0px, 0px) scale(1);opacity: 1;}
  100% {transform: translate3d(-45px, 0px, 0px) scale(0.6);opacity: 0}
}
Css
Mar.25,2021

is not hidden but scroll that scrollbars appear but are too high
all scroll bars do not show full
single settings overflow-x or overflow-y does affect another
you can try the following link to change a single x or y and the other side will default to scroll
overflow-x
overflow-y

Menu