html - 结合溢流y:自动和溢流x:可见

我在这里已经阅读了很多有关合并不同的溢出值的问题。但是，以下是我找不到的解决方案。

我有一个图像，它大于它的容器。因此，我想使其在x方向上可见，并在y方向上滚动（或自动）。

一种可能的解决方案是增加#inner的宽度，使其等于图像宽度，但是我不允许这样做。我尝试插入包装器（#outter），但是没有用。

有人想要解决问题吗？

#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>

最佳答案

您可以使用包装器元素并将其浮动到左侧，这将使它脱离常规文档流。然后，此浮动元素将与其内容一样大，这将使您获得x轴拉伸/上溢，但不能获得y轴滚动。要获取y轴滚动，请在浮动包装器上设置高度和溢出控件。

/* 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>