刪除滾動條後重新計算Chrome寬度

Question

我有一個容器，裏面有一個項目列表，我希望滾動條僅在鼠標位於容器上時可見。到目前爲止，我已經通過使用overflow:hidden和:hover overflow-y:auto來實現它 - 請參閱：https://jsfiddle.net/v4jrakak/

在Edge和Firefox中，它按預期工作。但是，在Chrome（52）中，將鼠標移出容器後，項目寬度不會恢復爲全寬。相反，一邊留下一個空間，看起來像填充增加了。

使用鍍鉻元素檢查，如果將鼠標懸停在開發工具窗口中的元素，div的頁面和開發者工具窗口顯示寬度不同的風格部分在圖上提示，直到您選擇不同的元素並回到它（雖然這可能只是一個檢查員沒有更新的東西）： 它也似乎通過檢查員觸及寬度的任何修改，將導致Chrome注意並正確地重新調整寬度。例如，如果我通過檢查器禁用了寬度：100％的.item樣式（它將其設置恢復爲其默認值：auto並且應該也是全寬），它以可視方式修復了div的寬度。當我通過檢查員重新啓用寬度：100％規則時，沒有任何更改，因爲此時寬度是正確的。

這是一個Chrome的bug嗎？有沒有什麼辦法可以在滾動條被移除後正確重新調整寬度？

*, 
 
*: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>