当在父元素上设置溢出属性

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>