在div重新调整大小时，滚动条不隐藏。

Question

JSFiddle解决了这个问题。

我在里面有个div。内部div包含一个复选框。选中复选框时，内部div的尺寸超过外部div的尺寸，因此当parentDiv的溢出属性设置为auto时，我们得到滚动条。但是，当再次未选中复选框时，滚动条保持不变，但内部div的尺寸小于父div。似乎重新计算是在考虑滚动条所占用的尺寸的情况下完成的。是否有一种方法来对抗这一点，因为我不想滚动条，当内部div可以适合在外部div。

<div ng-controller="MyCtrl" class="parentDiv">
    <div class="childDiv" ng-class="{'changeSize': item.checked}">
        <input type="checkbox" ng-model="item.checked"> 
   </div>
</div>

CSS

.parentDiv {
    height : 100px;
    width : 200px;
    overflow:auto;
    border : 1px solid;
}

.childDiv {
    height : 95px;
    width : 190px;  
    border : 1px solid green;
}
.changeSize { 
    height : 150px;
    width : 250px; 
}

Answer 1

这可以通过三种方法来解决。

1. 您可以将您的溢出属性更改为overlay (这将使您的斜杠位于子div的顶部(不是很好))。 .parentDiv {高度:100 1px；宽度:200 1px；溢出:覆盖；边框:1 1px实体；}
2. 您可以将父div样式编辑为隐藏，并通过引入time将其更改为auto，out.Here是指向js style JsFiddle链路的链接。
3. 您可以检查您的div实际上是否需要滚动条，并以此将css从js更改为。JsFiddle链路

Answer 2

问题是，一旦滚动条出现，childDiv的宽度和高度仍会溢出/接触滚动条。因此，即使不检查滚动条，滚动条也会保持不变。

为了克服这个问题，可以减少childDiv的宽度和高度。

喜欢,

.childDiv {
    height: 80px;
    width: 175px;
    border: 1px solid green;
}

这将确保滚动条和childDiv之间存在空白，这将导致滚动条在未选中复选框后消失。

更新：

将ng-class="{'changeOverflow': item.checked}"添加到您的parentDiv中，

<div ng-controller="MyCtrl" class="parentDiv" ng-class="{'changeOverflow': item.checked}">
    <div class="childDiv" ng-class="{'changeSize': item.checked}">
        <input type="checkbox" ng-model="item.checked"> 
   </div>
</div>

改变你的.parentDiv

.parentDiv {
    height : 100px;
    width : 200px;
    overflow:none;
    border : 1px solid;
}

添加另一个名为.changeOverflow的CSS类

.changeOverflow {overflow:scroll;}

这将起作用:)

小提琴