javascript - ul 溢出-x : visible and overflow-y:scroll doesn't work at same time

Question

长话短说 参见链接 http://codepen.io/anon/pen/MKqKZe对于也解释了我的问题的代码。

我想达到图片中的效果。

我的代码:

HTML

<div class="some-div-for-other-purpose">
  <ul class="dynamic-height-list">
    <li>
      <label>Name1</label>
      <span class='glyphicon glyphicon-option-vertical'
            onclick="toggleGreenDiv()">
      </span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
    <li>
      <label>Name2</label>
      <span class='glyphicon glyphicon-option-vertical'></span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
    <li>
      <label>Name3</label>
      <span class='glyphicon glyphicon-option-vertical'></span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
    <li>
      <label>Name4</label>
      <span class='glyphicon glyphicon-option-vertical'></span>
      <div class="toggle-visibility-green-div">ANYTHING INSIDE IT</div>
    </li>
  </ul>
</div>

CSS

body {
  margin-top: 20px;
  margin-left: 20px;
  background: lightblue;
}

.glyphicon {
  float: right;
  padding: 0 5px;
  cursor: pointer;
  }

.dynamic-height-list {
  max-height: 120px;
  overflow-y: scroll;
  width: 200px;

  li {
  width: 100%;
  padding: 5px;
  background-color: lightgray;
  list-style-type: none;
  position: relative;    

    &:hover {
      background-color: #BBB;
    }
  }
}

.toggle-visibility-green-div {
  display: none;
  position: absolute;
  background-color: lightgreen;
  left: 155px;
  top: 0;
}

.showGreenDiv + .toggle-visibility-green-div {
  display: block;
}

JS

$('.glyphicon').click(function() {
    $(this).toggleClass('showGreenDiv');
});

问题: 这个绿色的 div 进入主 ul 列表并使其水平滚动而不是像图像一样。

Remove overflow property from ul, then it works fine but I can't do that since the list is dynamic and it has to be made scrollable for after max-height

IMPORTANT: Also, adding overflow:visible for ul will make it work but at the same time overflow-y should also scroll since list is vertically scrollable. And overflow-x: visible and overflow-y:scroll doesn't work at same time.

NOTE: Since, I want green div to appear adjacent to whatever <'li>'s button is clicked, so it has to be a child of <'li'>. And I don't want to find the position of my <'li'> using javascript. So, please tell if solution exist by changing structure of HTML or modifying css

编辑: 此外，为什么 overflow-x:visible 与 overflow-y:visible 的工作方式不同。我的意思是，为什么不能放置 overflow-x:visible 不能让它工作。

Answer 1

将 overflow-y: scroll 和 max-height 移动到您的父级 div，以便在达到您的 width 后它不会被切断.

.some-div-for-other-purpose {
  max-height: 130px;
  overflow-y: scroll;
}

Like this