css - Absolutely positioned element inside container with overflow: auto -

we have modal position: fixed , overflow-y: auto.

this works when have lots of components overflow since scroll bar shown.

however when have custom calendar field inside modal opens popup/dropdown calendar , element outside 1 of sides of container, it's not shown.

is there way make popup/dropdown shown while keeping overflow-y: auto of modal? so:

codepen elaborate: http://codepen.io/anon/pen/jwmnma

.modal {   position: fixed;   background-color: pink;   height: 200px;   width: 200px;   left: 30%;    /* comment out show dropdown*/   overflow: auto; }  .dropdown {   background-color: lime;   height: 80px;   width: 80px;   position: absolute;   left: -50px; } 

html:

<div class="modal">   <div class="dropdown">     content in dropdown.   </div>   long long overflowing text... </div> 

in case, it's not possible absolutely positioned child element appear outside of parent .modal element when has overflow: auto set on (unless set position of .dropdown element fixed).

the easiest work-around wrap text , other contents, , set overflow: auto on element. instance, wrap .content element, , set height: 100% , overflow: auto in order add scrollbar , hide overflow specific elements.

updated example

<div class="modal">   <div class="dropdown">     content in 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; }