overflow-x：hidden y 方向為什么也 hidden？

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

為什么父元素設置了 overflow-x：hidden，但是 y 方向超出的部分也會 hidden

<div class='demo'></div>

div{
  width: 64px;
  height: 30px;
  background: #d9dadb;
  position: relative;
  overflow-x: hidden;
}
div::after {
    content: '';
    position: absolute;
    height: 36px;
    width: 44px;
    background: #676b6f;
    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}
}