相对元素超出视口

Question

我正在编写其他人的代码，所以我唯一可以更改的是 CSS。 我对 html 有类似的东西：

<div class="myElement">
...
   <div class="menu">
      <div class="menuList"></div>
   </div>
...
</div>

• myElement ：这是我不想超过的元素，它可以简单地作为视口。我不希望它可以滚动
• 菜单：它的位置是绝对的
• menulist：它的位置是相对的，它的最大高度是 300 像素，但我希望改变最大高度，以免超过其父级

目标是我不希望 menuList 超过 300px，但我也不希望它超过视口或 myElement。

希望您对此有解决方案！

Answer 1

本例模拟

• 如果myElement 比menuList 短，并且
• 如果 menuList 高于 300 像素。
• menu也绝对定位

将overflow 设置为auto 以及高度限制测试当内容使其变高时，它将使用滚动条。如果它更短，滚动条就会消失。 menu 的行为也相同。

.myElement {
  position: relative;
  height: 200px;
  background: green;
  overflow-y: scroll;
}

.myElement .menu {
  position: absolute;
  left: 10%;
  top: 10%;
}

.myElement .menu .menuList {
  max-height: 300px;
  background: pink;
  display: block;
  position: relative;
  overflow-y: auto;
  margin-bottom: 2rem;
}

<div class="myElement">
   <div class="menu">
      <div class="menuList">
        <ul>        
          <li>One</li>
          <li>Two</li>
          <li>Three</li>
          <li>Four</li>
          <li>Five</li>
          <li>Six</li>
          <li>Seven</li>
          <li>Eight</li>
          <li>Nine</li>
          <li>Ten</li>
          <li>Eleven</li>
          <li>Twelve</li>
          <li>Thirteen</li>
          <li>Fourteen</li>
          <li>Fifteen</li>
          <li>Sixteen</li>
          <li>Seventeen</li>
        </ul>
      </div>
   </div>
</div>