Overflow-x hidden only

Question

I've got the bx-slider that has overflow:hidden on its wrapper. My layout dictates, that one element should break out of the box and lay above the top edge.

Does not sound hard at all - thats what overflow-y and x is for. I thought. But no matter what I do, once I set one of the values to hidden, the other (x or y) is hidden too.

I've made a testcase which simulates the slider. I want only the grey element to be displayed in full size out of the wrapper box. The next elements should not be displayed until they flow into the viewport.

.wrapper {
  margin: 50px auto;
  width:400px;
  overflow-x:hidden;
}

.sliderContainer {
  width:1400px;
}

.sliderElement {
  width:400px;
  height:200px;
  background-color:red;
  display:inline-block;
  margin-right:50px;
}

.breakoutElement {
  width:50px;
  height:50px;
  background-color:grey;
  margin: -25px auto 0 auto;
}

<div class="wrapper">
  <div class="sliderContainer">
  
  <div class="sliderElement">
    <div class="breakoutElement"></div>
  </div>
    
  <div class="sliderElement"></div>
  <div class="sliderElement"></div>
  
  </div>
</div>

Answer 1

The reason for this behavior is according to the W3C spec:

[...] some combinations with ‘visible’ are not possible: if one is specified as ‘visible’ and the other is ‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.

You simply can add a top margin to your slide elements and adjust their size accordingly:

.sliderElement {
  ...
  height: 175px;
  margin-top: 25px;
  ...
}

If you want your slide to be exactly 200px, simply adjust the wrappers height.

.wrapper {
  margin: 50px auto;
  width: 400px;
  overflow-x: hidden;
}

.sliderContainer {
  width: 1400px;
}

.sliderElement {
  width: 400px;
  height: 175px;
  background-color: red;
  display: inline-block;
  margin-right: 50px;
  margin-top: 25px;
}

.breakoutElement {
  width: 50px;
  height: 50px;
  background-color: grey;
  margin: -25px auto 0 auto;
}

<div class="wrapper">
  <div class="sliderContainer">

    <div class="sliderElement">
      <div class="breakoutElement"></div>
    </div>

    <div class="sliderElement"></div>
    <div class="sliderElement"></div>

  </div>
</div>

See this post for more information about the overflow problem.

Answer 2

Instead of margin add padding to wrapper. Try this

.wrapper {
  margin: auto auto;
  padding:50px 0px;
  width:400px;
  display:block;
  overflow-x:hidden;
}

.sliderContainer {
  width:1400px;
}

.sliderElement {
  width:400px;
  height:200px;
  background-color:red;
  display:inline-block;
  margin-right:50px;
}

.breakoutElement {
  width:50px;
  height:50px;
  background-color:grey;
  margin: -25px auto 0 auto;
}

<div class="wrapper">
  <div class="sliderContainer">
  
  <div class="sliderElement">
    <div class="breakoutElement"></div>
  </div>
    
  <div class="sliderElement"></div>
  <div class="sliderElement"></div>
  
  </div>
</div>