組合溢出-y：auto和overflow-x：可見

Question

我在這裏讀了很多關於組合不同溢出值的問題。但是，我找不到解決我的問題的方法，這是以下內容。

我有一個圖像，它比它的容器大。所以，我想讓它在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>

Answer 1

您可以使用一個包裝元素並將其浮到左側，這將使其脫離正常的文檔流程。這個浮動元素將會和它的內容一樣大，這會讓你獲得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>

Answer 2

您可以將圖像位置設置爲絕對的，這將允許它溢出其容器：

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