overflow-y:visible in combination with overflow-x:hidden

Question

i am trying to design form with multiple steps where the next step will slide-in by bootstrap's carousel:

The problem ist that the carousel has an overflow definition which would cut off the chosen select options (not cuted in picture):

It seems that overflow-y:visible to allow the select options to be shown and overflow-x:hide to prevent the elements being visible outside of the container when sliding does not really work together. Even disabling overflow hiding of the carousel and only clipping horizontal overflow at the #wrapper does not work. Is there some way to have clipping for the x-axis but not for the y-axis?

Here's a complete not-working fiddle to show and experiment with the problem:

$(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>