水平スクロールの中のセマンティックUIのドロップダウンDIV

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

現在の設定ではできません。 オーバーフローの要素内にあるもの：なしは、要素の境界の外には表示できません。