CSS下拉菜单的Z索引问题

Question

我在以下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">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

我的下拉菜单隐藏在可满足的Elment的后面。有什么想法如何解决？

重要：不应更改DIV高度以显示下拉菜单。

Answer 1

.first-row

上删除 overflow: auto

$(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">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>
    </div>
  </div>
</div>

更新JSFIDDLE

Answer 2

只需将overflow-y更改为visible请参阅此

overflow-y属性指定内容的top/bottom edge - 如果它溢出了元素的内容区域。

#new_task_wrap > .box > .first_row {
  display: flex;
  overflow-y: visible;  //Here is the change
  width: 100%;
}

Answer 3

使用position: absolute用于.dropdown并相应地定位

这是更新的小提琴http://jsfiddle.net/z0kfdahu/2/