title: Make child dropdown visible while parent has overflow:scroll
body: <p>I've seen a couple answers <a href="https://stackoverflow.com/questions/42921671/make-child-div-overflow-inside-parent-div">here</a> and <a href="https://stackoverflow.com/questions/39302320/css-make-div-visible-despite-overflow-hidden">here</a> but these don't help my case.</p>
  
  <p>In my case, I have a container with scrollable content inside it:</p>
  
  <pre><code>.wrapper {
    border: 1px solid grey;
    width: 200px;
    height: 200px;
    overflow-y: scroll;
  }
  </code></pre>
  
  <p>Among the content items, there are dropdowns that modify this content. These are regular bootstrap3 dropdowns, straight from the docs:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
    &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
    Action &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
    &lt;ul class="dropdown-menu"&gt;
      &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;&lt;/li&gt;
      &lt;li role="separator" class="divider"&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The question is - how do I make the dropdown contents visible while main text remains hidden because of overflow?</p>
  
  <p>Regarding answers to similar questions: the dropdowns are part of the document flow, they are encountered here and there in different parts of the text, so I cannot <code>position:absolute</code> them. </p>
  
  <p>Fiddle here: <a href="https://jsfiddle.net/dfv59nuy/" rel="nofollow noreferrer">https://jsfiddle.net/dfv59nuy/</a></p>