仅溢出-x隐藏

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

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> 

Answer 2

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.