title: Handle twitter bootstrap dropdown clipped issue having overflow auto on container
body: <p>Bootstrap dropdown is getting clipped, i looked at all option mentioned in following questions but did not work.</p>
  
  <p><a href="https://stackoverflow.com/questions/14473769/bootstrap-drop-down-cutting-off">Bootstrap drop down cutting off</a></p>
  
  <p><a href="https://stackoverflow.com/questions/30189899/twitter-bootstrap-button-dropdown-z-index-layering-issue">Twitter Bootstrap Button dropdown z-index layering issue</a></p>
  
  <p><a href="https://stackoverflow.com/questions/13916326/z-index-issue-with-twitter-bootstrap-dropdown-menu">z-index issue with twitter bootstrap dropdown menu</a></p>
  
  <p><strong>Requirements</strong></p>
  
  <ul>
  <li>I want scrolling in main div</li>
  <li>I want bootstrap dropdown to not get clipped</li>
  <li>Height width of the div and dropdown should not be changed</li>
  </ul>
  
  <p><strong>Plunker:</strong> 
      <a href="http://plnkr.co/edit/HOKKYJ?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/HOKKYJ?p=preview</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
    &lt;head&gt;
      &lt;title&gt;Clipping problem&lt;/title&gt;
          &lt;link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" /&gt;
          &lt;link data-require="bootstrap@*" data-semver="3.3.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /&gt;
          &lt;script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"&gt;&lt;/script&gt;
          &lt;script data-require="bootstrap@*" data-semver="3.3.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="style.css" /&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
       &lt;script&gt;
              angular.module("myApp", []).controller("MainCtrl", function($scope) {
              });
          &lt;/script&gt;
    &lt;/head&gt;
  
   &lt;body style="height:100%;" ng-app="myApp"&gt;
          &lt;div style="background: indianred; position: relative; left:40%; height: 200px; width: 250px; overflow-y: auto;"&gt;
                  &lt;div ng-repeat="num in [1,2,3,4,5]"&gt;
                      &lt;div style="background: bisque; margin:5px; height: 50px;"&gt;
                          &lt;div style="position: relative; float: right"&gt;
                              &lt;button class="dropdown-toggle" data-toggle="dropdown"&gt;Click me Brother...!!&lt;/button&gt;
                              &lt;div class="dropdown-menu"&gt;
                                  &lt;div style="text-wrap: none; white-space: nowrap;"&gt;I am a text......................................!!&lt;/div&gt;
                                  &lt;div style="text-wrap: none;white-space: nowrap;"&gt;I am a also text.................................!!&lt;/div&gt;
                                  &lt;div style="text-wrap: none;white-space: nowrap;"&gt;Another text........................................................................................!!&lt;/div&gt;
                                  &lt;div style="text-wrap: none;white-space: nowrap;"&gt;One more text.............................!!&lt;/div&gt;
                                  &lt;div style="text-wrap: none;white-space: nowrap;"&gt;Aha one more text...........................................................................!!&lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
      &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>With problem:</strong> </p>
  
  <p><a href="https://i.stack.imgur.com/SEInh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SEInh.png" alt="Current situation"></a></p>
  
  <p><strong>What do i want:</strong></p>
  
  <p><a href="https://i.stack.imgur.com/Lz32s.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lz32s.png" alt="This is what i want"></a></p>
  
  <p>Thanks in advance</p>