css - 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>

我的下拉菜单隐藏在 contenteditable 元素的 div 后面。任何想法如何解决它？

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

Answer 1

删除 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">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>

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

Updated jsFiddle