水平滾動DIV內的語義UI下拉

Question

我試圖在包含許多列的表格中包含語義UI下拉列表，其中有一個水平滾動條。

單擊下拉菜單時，選項隱藏在div內。

撥弄： http://jsfiddle.net/rotemx/n0azk0jc/

代碼：

<div id="wrapper"> 
    <div id="content"> 
    <div style="width: 500px"> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
     <div class="inline-block"> 
     <div class="ui selection dropdown"> 
      <input type="hidden" name="gender"> 
      <i class="dropdown icon"></i> 
      <div class="default text">Gender</div> 
      <div class="menu"> 
      <div class="item" data-value="1">Male</div> 
      <div class="item" data-value="0">Female</div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

截圖：

quesiton： 如何使下拉菜單可見？

Answer 1

使用您當前的設置，您不能。 溢出：無元素內的任何內容不能顯示在元素邊界之外。