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

Question

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}
}

Answer 1

并不是hidden而是scroll出现滚动条但是高太小了 所有滚动条没显示完整
单一的设置overflow-x或者overflow-y确实会影响影响另一个
你可以尝试下面链接改变单一的x或y另一方会 会出现默认变成scroll
overflow-x
overflow-y