title: How to prevent cutting off absolute positioned elements and still keep a box-shadow embrace the parent div?
body: <p>First of all an example:
  <a href="https://jsfiddle.net/85uqehz5/" rel="nofollow noreferrer">https://jsfiddle.net/85uqehz5/</a></p>
  
  <p>The code is just an example, an easier version of my real code. I figured out that I cant't have both: Setting the wrap-div to <code>overflow: visible</code> the menu that shows up isn't cut off but the box shadow doesn't embrace the box; With <code>overflow:auto;</code>  the box-shadow is working but the menu cut off. How could I solve this? A fixed height would not be an option.</p>
  
  <p>Example Code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#menu').click(function() {
    $('#menu-list').toggleClass('hidden');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="wrap"&gt;
    &lt;div id="content"&gt;
      Some Content
    &lt;/div&gt;
    &lt;div id="content2"&gt;
      Some Content
    &lt;/div&gt;
    &lt;div id="menu"&gt;
      Open Menu
      &lt;div id="menu-list" class="hidden"&gt;
        &lt;div&gt; bla &lt;/div&gt;
        &lt;div&gt; bla &lt;/div&gt;
        &lt;div&gt; bla &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>