Kuan Kuan - 6 months ago 19
CSS Question

How to make scrollbar go away when element inside go back from overflow state

All:

I wonder how can I make a DIV recalculate the overflow when the elements inside change size, for example:



function changeSize(){
d3.select("#inner")
.style({
width: "195px",
height: "195px"
})
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div style="width: 200px; height:200px; background-color: lightblue; overflow:auto;">
<div id="inner" style="width: 250px; height:250px; background-color: lightpink;">
this is a inner eleement
</div>
</div>
<button onclick="changeSize()">CHANGE SIZE OF INNER ELEMENT</button>





The problem is:

Initially, the
#inner
DIV make the outer container DIV overflow, but after click change size button, it becomes smaller that container DIV, but because the scrollbar of previous overflow take some space(around 17px each), the container still think the inner DIV too large, which should be not. How can I make the outer container re-determine its overflow without consider previous affect?

Any help?

Answer

You can set overflow: hidden on your outer div and set to auto again. You can change 1000 to 1 for example.

function changeSize() {
  d3.select("#inner").style({
    width: "195px",
    height: "195px"
  });
  d3.select("#outer").style({
    overflow: 'hidden'
  });
  setTimeout(function() {
    d3.select("#outer").style({
      overflow: 'auto'
    });
  }, 1000);
}

CODEPEN