Absolutely positioned element inside container with overflow: auto

Question

We have a modal with position: fixed and overflow-y: auto.

This works well when we have lots of components that overflow since then the scroll bar is shown.

However when we have a custom calendar field inside the modal which opens a popup/dropdown calendar and that element is outside one of the sides of the container, it's not shown.

Is there a way to make the popup/dropdown shown while keeping the overflow-y: auto of the modal? Like so:

Codepen to elaborate: http://codepen.io/anon/pen/jWmNMa

.modal {
  position: fixed;
  background-color: pink;
  height: 200px;
  width: 200px;
  left: 30%;

  /* comment out this to show dropdown*/
  overflow: auto;
}

.dropdown {
  background-color: lime;
  height: 80px;
  width: 80px;
  position: absolute;
  left: -50px;
}

html:

<div class="modal">
  <div class="dropdown">
    This is content in a dropdown.
  </div>
  Long long overflowing text...
</div>

Answer 1

In your case, it's not possible for an absolutely positioned child element to appear outside of the parent .modal element when it has overflow: auto set on it (unless you set the position of the .dropdown element to fixed).

The easiest work-around would be to wrap the text and other contents, and then set overflow: auto on that element. For instance, you could wrap it with a .content element, and then set height: 100% and overflow: auto in order to add a scrollbar and hide the overflow for those specific elements.

Updated Example

<div class="modal">
  <div class="dropdown">
    This is content in a dropdown.
  </div>
  <div class="content">...</div>
</div>

.modal {
  position: fixed;
  background-color: pink;
  height: 200px;
  width: 200px;
  left: 30%;
}
.modal .content {
  height: 100%;
  overflow: auto;
}

Answer 2

This worked for me.

Of course, you're limited by the inconvenient effect of position:fixed; but this does achieve your desired result.

.dropdown {
  background-color: lime;
  height: 80px;
  width: 80px;
  position: fixed;
  margin-left:-50px;
}

Hope that helps.