overflow-x:hidden在具有等于或超过父级大小的子DIV内容的Chrome中不能很好地工作

Question

具有overflow-x的div：隐藏具有等于或超过父级大小的子div内容，只要overflow-y可见
点击滚动区域并向右拖动，它被滚动了

如果溢出-y不可见，如何避免滚动？？？？？？？？？？？？？

#viewport { 
  background: blue;
  overflow-y: auto;
  overflow-x: hidden;  
}
#content { 
  background: yellow;  
}

<div id="viewport" style="width: 300px; height: 200px;">   
    <div id="content" style="height: 300px; width: 300px;">
      <div style="height: 100px; width: 100px; background: orange;"></div>
    </div>
</div>  

Firefox和IE都不会滚动内容。

Answer 1

#outer { 
    width: 150px; 
    height: 200px;
    overflow-x: hidden;
    border: 1px solid black;
}
#inner { 
    overflow: hidden;
    width: 100%;
}