CSS弹出型div扩展到溢出自动div之外

我有一个侧边栏，我想在侧边栏的边界内滚动它的内容。我还希望有一个扩展到边栏边界之外的“弹出”div。这可能吗

下面是一个JSFIDLE来演示我的方法：

我有两个侧边栏。边栏1的溢出设置为自动。在侧边栏1中，弹出按钮不会超出侧边栏1的边界。边栏2的溢出设置为可见。在侧栏2中，弹出按钮可根据需要工作。不幸的是，侧边栏2不再滚动。我可以同时拥有一个滚动边栏和一个超出边界的弹出按钮吗？我的方法不对吗

以下是我正在使用的CSS：

#main{
  float: left;
}
#sidebar2{
  background: yellow;
  width: 200px;
  height: 500px;
  float: right;
  overflow: visible;
}
#sidebar1{
  background: orange;
  width: 200px;
  height: 500px;
  float: right;
  overflow: auto;
  margin-right: 50px;
}
.content{
  border: 1px solid red;
}
.options{
  background: blue;
  color: white;
  text-align: right;
  height: 20px;
  cursor: pointer;
}
.flyout{
  background: green;
  position: relative;
  width: 500px;
  height: 150px;
  top: 0;
  left: -300px;
  text-align: left;
  display: none;
}

---

这里是一个JS解决方案的工作小提琴。

。弹出按钮

设置为

位置：绝对

$(".options").click(function(){
    $(".flyout", this).toggle();
    var offset = $(this).offset();
    $(this).children('.flyout').css('left',offset.left-300);
    $(this).children('.flyout').css('top',offset.top);
});

---

不知道CSS如何解决这个问题。JS是一种选择吗？如果是，请检查此项。添加

position:absolute

并将单击区域的

left

和

top

属性赋予弹出按钮。