overflow-y：与overflow-x：hidden结合使用

Question

我正在尝试设计具有多个步骤的表单，其中下一步将由bootstrap的carousel滑入：

the problem I had

问题是旋转木马有一个溢出的定义会切断所选的选择选项（图中没有）：

似乎overflow-y:visible允许显示选择选项，而overflow-x:hide似乎可以防止元素在滑动时在容器外可见而不能真正协同工作。甚至禁用旋转木马的溢出隐藏并且仅在#wrapper处剪切水平溢出也不起作用。有没有办法对x轴进行剪裁而不是对y轴进行剪裁？

这是一个完整的不工作小提示，用于展示和试验问题：

$(function() {
  $('.carousel .item').removeClass('active');
  $('.carousel #item-select').addClass('active');
  $('.carousel').carousel({
    pause: true,
    interval: false
  });

  $('select').chosen();

  $('a#toggle').on('click', function() {
    $('.carousel').carousel('next')
  });
});

body {
  height: 1000px;
}

#wrapper {
  /* enabling will somehow change overflow-y too? */
  /*overflow-x: hidden;*/
}

.carousel-inner {
  /* disables overflow definition of carousel */
  overflow: initial !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.6.2/chosen.jquery.min.js"></script>

<div id="wrapper" style="margin:50px;">
  <div class="carousel slide" data-ride="carousel" style="border: 1px solid #ccc;">
    <div class="carousel-inner" role="listbox">
      <div id="item-select" class="item">
        <div class="form-group" style="margin-bottom:0px;">
          <label for="someselect">Some Select:</label>
          <select id="someselect" class="form-control">
                <option>option1</option>
                <option>option2</option>
                <option>option3</option>
                <option>option4</option>
                <option>option5</option>
                <option>option6</option>
         </select>
        </div>
      </div>
      <div id="item-other" class="item">some other</div>
    </div>
  </div>
</div>

<a href="#" id="toggle" class="btn btn-primary">toggle content</a>