title: Dropdown Hidden Inside Bootstrap Modal
body: <p>I am using Bootstrap modal with several dropdown into it due to bunch of stuff I set <code>overflow: auto</code> CSS property to have a scroll bar in modal.</p>
  
  <p>Problem is when I open any of the dropdown it does not appear out of the modal (due to that CSS property <code>overflow: auto</code>) it hides under the modal (see image).</p>
  
  <p>I want to appear that dropdown out of that modal I tried everything <code>z-index: 999999; position: absolute</code> etc but does not seems to work.</p>
  
  <p>I googled and all solutions I found was to remove that <code>overflow: auto</code> property and to put <code>overflow:visible</code> but as I mentioned due to bunch of dropdowns (around 150) I must need to put scroll bar for overflow otherwise modal height mess the page.</p>
  
  <p><strong>CSS (mandatory)</strong></p>
  
  <pre><code>.modal-body {
    max-height: 100px;
    overflow: auto;
  } 
  </code></pre>
  
  <p>The simple solution is you just replace that <code>overflow:auto</code> to <code>visible</code> and it works, but I need solution with keeping <code>overflow:auto</code>;</p>
  
  <p>here is the working example on <a href="https://jsfiddle.net/4ukh4nq3/" rel="noreferrer">JSFiddle</a>  </p>
  
  <p>Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/Q7R8U.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Q7R8U.png" alt="enter image description here"></a></p>