水平滚动DIV内的语义UI下拉列表

Question

我正在尝试将Semantic-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

使用您当前的设置，您不能。 overflow：none 元素内部的任何内容都不能显示在元素边界之外。