title: Overlay bootstrap dropdown menu over hidden scrollbar
body: <p>In this example <a href="https://jsfiddle.net/HenryVonfire/ez98t3z5/2/" rel="nofollow">jsfiddle</a>, how can I make the dropdown menu be shown over the previous divs? (I mean, not to be cut with the container and inner-container divs) I've played with position absolute/relative and z-index but I end up breaking the layout.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="inner-container"&gt;
      &lt;div class="box"&gt;
        div #1
      &lt;/div&gt;
      &lt;div class="box"&gt;
        div #2
      &lt;/div&gt;
      &lt;div class="box"&gt;
        div #3
        &lt;div class="dropdown"&gt;
      &lt;button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"&gt;Dropdown Example
      &lt;span class="caret"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;&lt;a href="#"&gt;A&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;B&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;C&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;D&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;E&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;F&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;G&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="box"&gt;
        div #4
      &lt;/div&gt;
      &lt;div class="box"&gt;
        div #5
      &lt;/div&gt;
      &lt;div class="box"&gt;
        div #6
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container{
    overflow-y: hidden;
    overflow-x: hidden;
  }
  
  .inner-container{
    overflow-y: scroll;
    margin: 0 -30px 0 0;
    height: 200px;
  }
  .box{
    margin-bottom:5px;
    background-color:lightblue;
    height:50px;
  }
  </code></pre>