overflow-y：autoとoverflow-xを結合：表示

Question

ここでは、さまざまなオーバーフロー値の組み合わせについて多くの質問があります。しかし、私は私の問題の解決策を見つけることができませんでした。それは次のようなものです。

イメージがあり、そのコンテナよりも大きいです。ですから、x方向に見えるようにし、y方向にスクロール（または自動）したいと思います。

可能な解決策の1つは、#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>