Issue with z-index of css dropdown menu - css

Question

I have broken my head on the following css.
JSFiddle:
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
My dropdown menu is hidden behind the divs of contenteditable elment. Any ideas how to fix it?
Important: The div heights should not be changed to show the dropdown menu.

Answer 1

Remove overflow: auto on .first-row
$(document).on('click', '.dropdown', function() {
$(this).find('.dropdown-content').toggle();
});
#new_task_wrap {
position: relative;
display: flex;
}
#new_task_wrap > .box {
width: 100%;
border-style: solid;
border-color: #98afc8;
}
#new_task_wrap > .box > .first_row {
display: flex;
width: 100%;
/*overflow-y: auto;*/
}
#new_task_wrap > .box > .first_row > .description {
background-color: white;
display: inline-block;
font-weight: 400;
padding: 9px 9px 9px 9px;
cursor: text;
outline: 0;
flex-grow: 1;
overflow-y: auto;
}
#new_task_wrap > .box > .first_row > .calendar {
padding-top: 8px;
cursor: pointer;
}
.right-add-on {
position: relative;
}
.right-add-on >:not([contenteditable=true]) {
position: absolute;
right: 0;
color: #67829e;
cursor: pointer;
}
.dropdown {
position: relative;
vertical-align: middle;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
right: 0;
min-width: 160px;
background-color: yellow;
padding: 12px 16px;
z-index: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='new_task_wrap'>
<div class='box'>
<div class='first_row'>
<div class='description' contenteditable='true'>
</div>
<div class='calendar dropdown'>
<i class="fa fa-calendar" aria-hidden="true"></i>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</div>
</div>
</div>
Updated jsFiddle

Answer 2

Just change overflow-y to visible
Refer this
The overflow-y property specifies what to do with the top/bottom edge of the content - if it overflows the element's content area.
#new_task_wrap > .box > .first_row {
display: flex;
overflow-y: visible; //Here is the change
width: 100%;
}

Answer 3

use position: absolute for .dropdown and position it accordingly
here is the updated Fiddle http://jsfiddle.net/z0kfdahu/2/