合并溢出-y：使用溢出-x滚动：可见

Question

我花了数小时试图弄清楚这一点，但没有运气。我有一个div，其弹出式div绝对位于右侧。一切正常，但是我需要在主div中添加最大高度。由于它会溢出，因此我添加了溢出-y滚动，但它使所有内容混乱了。它可以防止我的弹出式div离开主div，并使用水平滚动条将它们放置在内部。

我已经模拟了一个示例：

.menu {
  height: 200px;
  max-height: 200px;
  width: 200px;
  background-color: red;
  margin-bottom: 50px;
}

.menu.overflow {
  overflow-y: scroll;
  background-color: purple;
  height: 150px;
  max-height: 150px;
}

.menu-item {
  height: 30px;
  width: 100%;
  background-color: blue;
  position: relative;
  margin-bottom: 10px;
  cursor: pointer;
}

.menu-item-flyout {
  display: none;
  width: 200px;
  height: 100px;
  position: absolute;
  left: 100%;
  background-color: green;
  top: 0;
}

.menu-item:hover .menu-item-flyout {
  display: block;
}

<!-- no overflow y scroll -->

working correctly:
<div class="menu">
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
</div>

<!-- overflow y scroll -->

not working. want to add overflow y scroll to menu but it prevents the flyout
<div class="menu overflow">
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
  
  <div class="menu-item">
    <div class="menu-item-flyout"></div>
  </div>
</div>

任何帮助将不胜感激，谢谢！！

Answer 1

很遗憾，您无法混合溢出值。 Per MDN on overflow-x：

如果overflow-x为overflow-y，hidden或scroll，并且此属性为auto（默认），它将隐式计算为visible。

auto，在这种情况下，强制滚动条。无法解决此问题：您不能仅在一个方向上发生盒子溢出。

作为一般原则，基于悬停的菜单很难按原样导航，但从可访问性的角度来看却很危险。在滚动条中添加滚动条是灾难的根源。我建议从另一个角度解决问题。