Beim Übersteuern der Überlaufeigenschaft auf das übergeordnete Element

Question

.

Ein Container mit height:auto enthält Artikel mit der width:100%. Wenn auf eine Schaltfläche geklickt wird, ändert sich die Liste in height:400px und overlow-y:scroll. Wenn Sie erneut klicken, haben die Elemente nicht mehr width:100%. Sie bleiben die Breite, da die Bildlaufleiste immer noch sichtbar wäre.

Gibt es einen CSS-Weg, dies zu beheben? Ich möchte einen JQuery-Hack vermeiden.

Das ist, was ich sehe auf Windows, Chrome 52:

Nach Laden der Seite:

Nach einem ersten Klick auf Toggle:

Nach ein zweiter Klick auf Toggle:

Vielen Dank!

?!? Links zu jsfiddle.net müssen von Code begleitet werden. Okaaayy ..?!?

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

Answer 1

Dies scheint ein Fehler in Google Chrome zu sein. Wenn die Bildlaufleiste hinzugefügt wird, verlieren die untergeordneten Elemente ihre Anfangsbreite. Die berechnete Breite ändert sich jedoch nicht, wenn das Element überprüft wird.

Als CSS-Hack können Sie X-Überlauf im Container ausblenden, um zu verhindern, dass Kinder die Größe ändern, wenn die Bildlaufleiste hinzugefügt wird.

Seien Sie vorsichtig, dieser Trick kann praktisch fehlschlagen, wenn der Inhalt der Elemente zu lang ist und den Behälter überläuft.

$("#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>