オーバーフロー：hidden、ここで間違っているのは

Question

divタグの中にdivを明示的に配置しました。問題は、ブラウザウィンドウのサイズを変更したときに、指定したdiv位置にスクロールできないことです。私はオーバーフローを使ってみました、そして、divを完全に隠す以外に何もしません。私は明らかにここに何かを欠いている。ブラウザウィンドウのサイズを変更すると画像を非表示にするにはどうすればよいですか？これをどうすれば解決できますか？

.Topics__imageContainer { 
 
    position: absolute; 
 
    -webkit-transition: opacity .5s,-webkit-transform .5s; 
 
    transition: opacity .5s,-webkit-transform .5s; 
 
    transition: transform .5s,opacity .5s; 
 
    transition: transform .5s,opacity .5s,-webkit-transform .5s; 
 
} 
 

 
.Topics__image { 
 
    border-radius: 50%; 
 
    border: 3px solid #fff; 
 
    background-color: #fff; 
 
    box-sizing: content-box; 
 
    overflow-x:hidden; 
 
    display:inline-block; 
 
} 
 

 
.icon_wrapper_inner{ 
 
    overflow-x: hidden; 
 
    position: relative; 
 
}

<div class="icon_wrapper_inner"> 
 
    <div class="Topics__imageContainer" style="opacity: 1; left: 1380px; top:268px;"> 
 
    <div class="Topics__image Topics__image--far" style="width:50px;height:50px;background:url('http://4hdwallpapers.com/wp-content/uploads/2013/05/Emo-Star-Dekstop-Background-728x546.jpg');background-size:100%"> 
 
    </div> 
 
    </div> 
 
</div> 
 

Answer 1

CSSで非表示のロジックを逆にしてみてください。

overflow: hidden; 
overflow-y: auto; 

Answer 2

bootstrap.cssでhtml内にoverflow：hiddenを追加して修正しました。今度は、ブラウザのサイズを変更すると、オーバーフローが隠され、スクロールできなくなります。

html { 
 
    font-size: 62.5%; 
 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 
 
    overflow-x:hidden; 
 
}