Dropdown ignore parent overflow
<p>I have a modal where I have dropdowns in the element.</p>

<p>The problem is since I have an overflow set, the dropdown, although it appears, does not appear on top of the modal. I understand since it's because I set an overflow:auto on the parent. </p>

<p>Is there any way via CSS that I can ignore the parent and show the dropdown above the "modal"? </p>

<p>You'll see in the example, the content in the red line is visible if you scroll. Which is the expected behaviour based on my code at the moment. What is the adjustment I will need to make to show that dropdown above the modal? </p>

<p>Tried fixing with z-index and I read somewhere on SO to set the grandparent to position relative.</p>

<p>Prefer a CSS only solution.</p>

<p>Thanks!</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-css lang-css prettyprint-override"><code>.w-100 {
  width: 100%;
  height: 100%;
}

.h-100 {
  width: 100%;
  height: 100%:
}

.modal-overlay {
  height: 100%;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  z-index: 65;
  padding-top: 100px;
  overflow: auto;
  background-color: rgba(0,0,0,.6);
}

.modal-small {
  max-width: 600px;
  width: 40%;
  margin: 0 auto;
  float: none;
  display: block;
  position: relative;
  background-color: #fff;
  padding: 0;
}

.container {
  min-height: 120px;
  max-height: 400px;
  overflow: auto;
  padding: 15px;
}

.element-container {
  height: 100px;
  width: 100%;
  display: inline-block;
  padding: 10px;
  margin-bottom: 10px;
  position: relative;
}

.element-flex-container {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 5px 15px;
  border-radius: 2px;
  border-bottom: 3px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
  border-right: 1px solid rgba(0,0,0,.1);
  border-top: 1px solid rgba(0,0,0,.1);
}

.avatar {
  height: 32px;
  width: 32px;
  border-radius: 100%;
  margin-right: 10px;
}

.flex-1 {
  flex: 1;
}

.dropdown-width {
  text-align: right;
  width: 100px;
}

.dropdown-container {
  display: inline;
  position: relative;
}

.toggle-dropdown {
  color: #4caf50
}

.dropdown {
  position: absolute;
  border: 1px solid red;
  left: auto; 
  right: 0;
  width: 120px; 
  display: block;
  background-color: #fff;
  z-index: 10;
  margin-bottom: 20px;
  padding: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal-overlay"&gt;
  &lt;div class="modal-small"&gt;
    &lt;div class="w-100 h-100"&gt; &lt;!-- this is since I inject an ui-view --&gt;
      &lt;div class="w-100 h-100"&gt; &lt;!-- this is since I inject an ui-view --&gt;
        &lt;div class="container"&gt;
          
          &lt;!-- Repeat of elements --&gt;
          &lt;div class="element-container"&gt;
            &lt;div class="element-flex-container"&gt;
              &lt;img src="http://images.freeimages.com/images/previews/7ab/chrysanthemum-3-1621562.jpg" class="avatar" /&gt;
              &lt;div class="flex-1"&gt;
                Something here
              &lt;/div&gt;
              &lt;div class="dropdown-width"&gt;
                &lt;div class="dropdown-container"&gt;
                  &lt;div class="toggle-dropdown"&gt;
                    Toggle
                  &lt;/div&gt;
                  &lt;div class="dropdown"&gt;
                    Something here
                    &lt;br /&gt;
                    Something else
                    &lt;br /&gt;
                    Something else
                    &lt;br /&gt;
                    Something else
                    &lt;br /&gt;
                    Something else
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>