當在父元素上設置溢出屬性

Question

The example Fiddle here。

一個容器height:auto包含width:100%的項目。單擊按鈕時，列表將更改爲height:400px和overlow-y:scroll。當再次點擊時，項目不再有width:100%。它們保持寬度，因爲滾動條仍然可見。

有沒有解決這個問題的CSS方法？我想避免jquery-hack。

這是我所看到的Windows版，Chrome 52：

頁面加載後：

經過：

上切換第一後點擊第二次點擊切換：

非常感謝！

？！？ jsfiddle.net的鏈接必須附有代碼。 Okaaayy ..？！？

.scroll{ 
    height:400px; 
    overflow-y:scroll; 
} 

Answer 1

這似乎是Google Chrome中的一個錯誤。當添加滾動條時，子元素鬆開它們的初始寬度，但是當元素被檢查時，計算的寬度沒有變化。

作爲CSS hack，您可以隱藏容器中的X-overflow，以防止在添加滾動條時調整孩子的大小。

如果物品的內容太長並且溢出容器，注意這個技巧實際上可能會失敗。

$("#toggle-scroll").on("click touchstart", function(){ 
 
\t $("#list").toggleClass("scroll"); 
 
});

#list{ 
 
    background-color:#808000; 
 
    width:300px; 
 
    overflow-x:hidden; 
 
} 
 
.item{ 
 
    background-color:#555;color:#efefef; 
 
    padding:4px;margin:1px; 
 
} 
 
.scroll{ 
 
    height:400px; 
 
    overflow-y:scroll; 
 
} 
 
.btn{ 
 
    display:inline-block 
 
    padding:15px; 
 
    margin:15px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="toggle-scroll" class="btn">Toggle Scrollbar</button> 
 

 
<div id="list"> 
 

 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 
    <div class="item">Entry XYZ</div> 
 

 
</div>