绝对的孩子在溢出

Question

我遇到的问题是我需要实现我所拥有的“DROPDOWN”在容器外部突破，但是他的父级不是位置：绝对因为它打破了内部滚动的结构。如何使Dropdown打破滚动容器的边界+没有使用javascript的绝对父？

#W {
  overflow-x: visible;
  height: 150px;
  width: 150px;
  display: inline-block;
  background-color: lightgray;
}

#c {
  overflow-y: scroll;
  display: inline-block;
  height: 150px;
  width: 150px;
  background-color: lightgray;
}

#max-parent {
  position: absolute;
}


#abs-p {
  position: relative;
  display: inline-block;
  background-color: red;
}

#abs-c {
  position: absolute;
  text-align: right;
  width: 400px;
  background-color: red;
}

<div id="w">
  <div id="c">
    <div>HELLO</div>
    <div id="max-parent">
      <div id="abs-p">
      <div id="abs-c">
        Dropdown
      </div>
      </div>
    </div>

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