javascript - 如何防止切断绝对定位元素并仍然保持盒子阴影包含父 div？

Question

首先举个例子: https://jsfiddle.net/85uqehz5/

该代码只是一个示例，是我的真实代码的更简单版本。我发现我不能同时拥有两者:将 wrap-div 设置为 overflow: visible 显示的菜单没有被切断，但框阴影不包含框；使用 overflow:auto; 时，box-shadow 可以正常工作，但菜单会被切断。我该如何解决这个问题？固定高度不是一种选择。

示例代码:

$('#menu').click(function() {
  $('#menu-list').toggleClass('hidden');
});

#wrap {
  width: 80%;
  height: auto;
  overflow: visible;
  box-shadow: 0 0 .2rem rgba(0, 0, 0, .4);
}

#content {
  width: 200px;
  height: 20px;
  margin: 0 auto;
}

#content2 {
  float: left;
}

.hidden {
  display: none;
}

#menu {
  position: relative;
  height: 20px;
  width: 100px;
  background-color: #ccc;
  float: left;
}

#menu-list {
  position: absolute;
  top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="wrap">
  <div id="content">
    Some Content
  </div>
  <div id="content2">
    Some Content
  </div>
  <div id="menu">
    Open Menu
    <div id="menu-list" class="hidden">
      <div> bla </div>
      <div> bla </div>
      <div> bla </div>
    </div>
  </div>
</div>

Answer 1

根据您的具体情况，这非常简单:

1- 从 #wrap

中移除 overflow: auto;

2- 将此添加到您的 CSS:

#wrap:after {
  display: table;
  content: "";
  clear: both;
}

这使得 #wrap 的计算高度包括 float 元素。

如果您有多种用途，请声明一个类似 clearfix 的类，并在需要时使用它。

演示: https://jsfiddle.net/85uqehz5/1/