Combine overflow-y: auto and overflow-x: visible

Question

I have read a lot of question here about combining the different overflow values. However, I couldn't find a solution for my problem, which is the following.

I have an image, which is larger than its container. So, I want to make it visible in x direction and scroll (or auto) in the y direction.

One possible solution would be to increase the width of #inner and make it equal to the image width, but I am not allowed to do that. I tried to insert a wrapper (#outter) but it didn't work.

Does anyone want how to solve the problem?

 #outter { width: 200px; height: 200px; overflow-y: scroll; } #inner { overflow-x: visible; width: 200px; height: 200px; } img { width: 400px; height: 400px } 

 <div id="outter"> <div id="inner"> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> </div> </div> 

Answer 1

You can use a wrapper element and float it to the left which will take it out of the normal document flow. This floated element will then be as large as its content, which will get you the x-axis stretch/overflow but not the y-axis scroll. To get the y-axis scroll set a height and overflow controls on the floated wrapper.

 /* Micro Clearfix - http://nicolasgallagher.com/micro-clearfix-hack/ */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } .container { width: 200px; /* Following two properties, for demo, so you can see the container. */ min-height: 400px; background-color: pink; } .img-wrap { float: left; height: 200px; overflow-y: scroll; } img { width: 400px; height: 400px; } 

 <div class="container cf"> <div class="img-wrap"> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> </div> <p> Lorem ipsum dolor. </p> </div> 

Answer 2

You can set the image position to absolute, which would allow it to overflow its container:

 #outter { width: 200px; height: 200px; overflow-y: scroll; overflow-x: visible; } #inner { overflow-x: visible; width: 200px; height: 200px; } img { width: 400px; height: 400px; position: absolute; top: 0; left: 0; } 

 <div id="outter"> <div id="inner"> <img src="http://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools.com"> </div> </div>