スクロールバーを削除した後にクロムの幅を再計算する

Question

私はその中にアイテムのリストがあるコンテナを持っています。マウスがコンテナの上にあるときだけスクロールバーを表示したいと思います。これまでのところ、私はoverflow:hiddenと:hover overflow-y:autoを使用してこれを達成しました。https://jsfiddle.net/v4jrakak/

EdgeとFirefoxでは、期待通りに動作します。ただし、Chrome（52）では、コンテナからマウスを離した後にアイテムの幅が最大幅まで拡大しません。代わりに、詰め物が増えたように見えるように側にスペースが残っています。

devツールウィンドウの要素の上にマウスを置くと、ページ上のdivのツールチップとdevツールウィンドウのスタイル部分の図は、別の要素を選択するまで、幅が異なります（それは単に物を更新しないインスペクタかもしれませんが）： また、幅に触れるインスペクタによる変更のように見えますが、Chromeが気づき、幅を正しく再調整します。たとえば、inspector（これはデフォルト：autoに設定されていて、フルワイヤでなければなりません）によって.itemスタイルのwidth：100％を無効にした場合、divの幅が視覚的に固定されます。また、幅：100％のルールをインスペクタで再度有効にすると、その点で幅が正しいため何も変わりません。

これはChromeのバグですか？スクロールバーが削除された後に幅を正しく再調整する方法はありますか？

*, 
 
*:before, 
 
*:after { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    position: relative; 
 
    width: 460px; 
 
    border: 1px solid black; 
 
    padding: 0 8px; 
 
    margin: 0; 
 
    height: 600px; 
 
    overflow: hidden; 
 
} 
 
.wrapper:hover { 
 
    overflow-y: auto; 
 
} 
 
.item { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: gray; 
 
    margin: 8px 0; 
 
}

<div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>

Answer 1

あなたはそれを修正するために.wrapper:hoverに同様のパディングを追加することができます。ただし、回避策です。

*,*:before,*:after {box-sizing:border-box;} 
 

 
.wrapper{ 
 
    position:relative; 
 
    width:460px; 
 
    border:1px solid black; 
 
    padding: 0 8px; 
 
    margin: 0; 
 
    height: 600px; 
 
    overflow:hidden; 
 
} 
 

 
.wrapper:hover { 
 
    overflow-y:auto; 
 
    padding-right:7px; 
 
} 
 

 
.item { 
 
    position: relative; 
 
    width:100%; 
 
    height: 150px; 
 
    background-color: gray; 
 
    margin: 8px 0; 
 
}

<div class="wrapper"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>