How to move the last box to next div if its exceeding the height of the parent div automatically?

same to the next div it will automatically move the move to the third.. and so on…

the boxes height is depends on the content it will be dynamic

My code.

 //alert($('.parent-div').height());
  
  var cats = $('.parent-div').eq(0).find('table'),
  num = 3;//this is not needed actually

  if($('.parent-div').height() >= 1122){
  cats.each(function(i) { // cycle through each li
    if (i >= num) { // start after num counts
      var temp = $(this),
      count = Math.floor(i / num); // work out the multiples
      $('.parent-div').eq(count).append(temp[0].outerHTML); // add to the next eligable parent
      temp.remove(); // remove it from the first list
      }
    });
  }

https://jsfiddle.net/erwinagpasa/yn763h89/4/

>Solution :

The code you provided is trying to move table elements to the next div when the height of the parent div exceeds a certain value. However, it is not working as expected because the calculation of the count variable is not correct.

You can use the following code:

const parentDiv = document.querySelector('.parent-div');
const tables = parentDiv.querySelectorAll('table');
const maxHeight = parentDiv.clientHeight;
let currentHeight = 0;
let currentDiv = parentDiv;

tables.forEach((table, index) => {
  currentHeight += table.clientHeight;
  
  if (currentHeight > maxHeight) {
    const nextDiv = document.createElement('div');
    nextDiv.className = 'parent-div';
    nextDiv.style.height = maxHeight + 'px';
    nextDiv.style.overflowY = 'auto';
    
    currentDiv.after(nextDiv);
    currentDiv = nextDiv;
    currentHeight = table.clientHeight;
  }
  
  currentDiv.appendChild(table);
});

.table1 {
  border-collapse: collapse;
  margin: 4px;
  height: 400px;
  width: 100%;
}

.table2 {
  border-collapse: collapse;
  margin: 4px;
  height: 200px;
  width: 100%;
}

table, th, td {
  border: 0px solid;
  padding: 5px;
  background-color: #ddd;
  text-align: center;
}

.parent-div {
  height: 1122px;
  width: 25%;
  padding: 10px;
  border: 1px solid #ff0000;
  margin: 10px;
}

<div class="parent-div" style="height: 300px; overflow-y: auto;">
  <table style="height: 50px;">
    <tr><td>Box 1</td></tr>
  </table>
  <table style="height: 100px;">
    <tr><td>Box 2</td></tr>
  </table>
  <table style="height: 150px;">
    <tr><td>Box 3</td></tr>
  </table>
  <table style="height: 200px;">
    <tr><td>Box 4</td></tr>
  </table>
  <table style="height: 250px;">
    <tr><td>Box 5</td></tr>
  </table>
  <table style="height: 300px;">
    <tr><td>Box 6</td></tr>
  </table>
</div>

In this code, we first calculate the maximum height of the parent div and then iterate through each div. For each div, we calculate its height and add it to a running total of the current height. If the current height exceeds the maximum height, we move the last table element to the next div.

If the next div does not exist, we create a new div and append it after the current div. We then append the last table element to the new div and reset the current height to the height of the new div.