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

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：

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

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

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

结合溢出-y：滚动到溢出-x：可见

1 个答案: