html - 合并溢出-y : scroll with overflow-x: visible

Question

我有一个 div，它的弹出 div 绝对位于右侧。它一切正常，但我需要向我的主 div 添加最大高度。因为它会溢出，所以我添加了 overflow-y scroll，但它把一切都搞砸了。它防止我的弹出式 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 -->

This is not working. I 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 :

If overflow-y is hidden, scroll or auto and this property is visible (default) it will implicitly compute to auto.

auto，在本例中，强制滚动条。没有办法解决这个问题:你不能让盒子只在一个方向溢出。

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