css下拉菜单的z-index问题

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>

我的下拉菜单隐藏在令人满意的元素之后。任何想法如何解决它？

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

Answer 1

删除overflow: auto

上的.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">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>

        </div>
      </div>
    </div>
  </div>
</div>

Updated jsFiddle

Answer 2

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

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/