html - 如何使下拉列表扩展外部div

Question

我的下拉菜单包裹在一个 div 中，而这个 div 包裹在另一个 div 中。我希望最外面的 div 在必要时有一个滚动条。但是，由于最外层的div高度固定，当下拉菜单过长时，会被外层的div覆盖。我怎样才能使下拉菜单超出外部 div，或者当下拉菜单被外部 div 覆盖时是否可以自动更改为下拉菜单？

.widget-body {
  position: relative;
}
.widget-body .col-xs-2.open {
  position: static;
}
.widget-body ul.dropdown-menu {
  right: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div class="widget-body" style="border: solid 1px black; overflow-x:hidden; overflow-y: auto;height:100px; margin:10px 10px 10px 10px;">
  <div class="widget-main" id="ds_div">
    <div class="row">
      <div class="col-xs-6">
        <div class="widget-body" style="border: solid 1px black; height:45px; margin-bottom:10px;margin-right:20px; background:linear-gradient(to right, #85e2f0 5% , white 95%);">
          <div class="col-xs-2" style="height:45px; font-size: 28px;">
            <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
          </div>
          <div class="col-xs-8" style="height:30px;text-align:center; border: solid 1px black;margin-top: 6px; display: flex; align-items: center;justify-content: center; background-color: #42d442;">test</div>
          <div class="col-xs-2" style="height:43px; font-size: 27px; text-align: center;">
            <a data-toggle="dropdown">
              <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span>
            </a>
            <ul class="dropdown-menu" role="menu">
              <li><a href="#">Item 1</a></li>
              <li><a href="#">Another item</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

上面的代码不能正常工作，所以这里是另一个demo

Answer 1

当我从 widget-body 中取出 overflow-x 和 overflow-y 时，我可以看到下拉菜单出现了出。

检查这个修改过的jsfiddle