The scroll bar is not hidden when setting the div.

Question

JSFiddle for the problem.

I have a div inside a div. The inner div contains a checkbox. When the checkbox is selected, the dimensions of the inner div are larger than the dimensions of the outer div and, therefore, we get the scroll bars, since the parentDiv overflow property is set to auto. But when the checkbox is cleared again, the scroll bars remain, but the dimensions of the inner div are smaller than the parent div. It seems that recounting is done taking into account the sizes occupied by the scroll bar. Is there any way to counter this, since I don't need scrollbars when the inner div can fit into the outer 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

.

• overlay ( scorllbar div ( )).

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

• div , out.Here js JsFiddle

• , 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>

<<27 >

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

CSS .changeOverflow

.changeOverflow {overflow:scroll;}

:)

FIDDLE