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>

hungerstar · Accepted Answer · 2017-02-14 16:47:49Z

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>

hungerstar · Accepted Answer · 2017-02-14 16:07:43Z

0

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>

edited Feb 14, 2017 at 16:07

hungerstar

21.8k6 gold badges52 silver badges63 bronze badges

answered Feb 14, 2017 at 16:05

erwstout

1,3071 gold badge13 silver badges31 bronze badges

1 Comment

hungerstar Over a year ago

I believe the OP is expecting a scrollbar along the y-axis.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related