在父元素

Question

The example Fiddle here

height:auto的容器包含width:100%的项目。单击按钮后，列表将更改为height:400px和overlow-y:scroll。再次点击时，这些项目不再是width:100%。它们仍然是宽度，因为滚动条仍然可见。

有没有一种解决这个问题的方法？我想避免jquery-hack。

这就是我在Windows上看到的，Chrome 52：

页面加载后：

首次点击切换后：

再次点击Toggle：

非常感谢你！

？！？链接到jsfiddle.net必须附带代码。 Okaaayy ..？！？

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

Answer 1

这似乎是Google Chrome中的一个错误。添加滚动条时，子元素会松开它们的初始宽度，但是在检查元素时，计算出的宽度没有变化。

作为CSS hack，您可以隐藏容器中的X溢出，以防止子项在添加滚动条时调整大小。

小心这个技巧实际上可能会失败，如果项目的内容太长并且溢出容器。

$("#toggle-scroll").on("click touchstart", function(){
	$("#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>