ドロップダウンを外側の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>

上記のコードはので、ここでは、正常に動作しない私が代わりにあなたの外側の層をカバーするためのdivを使用しての、あなたがコントロールするテーブルを使用することができると思う別のdemo

Answer 1

です構造。

<table border="1px" width="1080" height="1080"> 
<tr> 
<td> 
    <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> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
        <li><a href="#">Another item</a></li> 
       </ul> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    </td> 
    </tr> 
    </table> 

私は助けてくれると思います。

私は ウィジェット-体から overflow-xと overflow-yを取り出している

Answer 2

は、私は、ドロップダウンメニューが出てきた見ることができます。これはjsfiddle