I have a small table made out of divs with an 'add new' button to add a new line and an x button on each line to remove the line. The table has a max-height and once this is reached scrolls to the bottom when a new line is added. I have set scroll-behaviour to smooth in the css so that once the tables max height has been reached adding and taking away lines can be seen by the user. This is working well if a new line is added, but doesn't work at all when a line from the bottom is removed. I have tried to add the smallest amount of code to replicate the problem.

I have tried using jquery animate and intervals, but can't get the scroll to show when a line is removed.

```js
//ADD NEW LINE//

function addNewLine() {
  var productsLinesBox = document.getElementsByClassName("products-lines-box");
  var productItemLine = document.createElement("div");
  productItemLine.classList.add("product-item-line");
  productsLinesBox[0].appendChild(productItemLine);
  var productItemSKU = document.createElement("div");
  var spn = document.createElement("span");
  productItemSKU.classList.add("product-item", "sku");
  productItemLine.appendChild(productItemSKU);
  productItemSKU.appendChild(spn);
  var productItemName = document.createElement("div");
  var spn1 = document.createElement("span");
  productItemName.classList.add("product-item", "name");
  productItemLine.appendChild(productItemName);
  productItemName.appendChild(spn1);
  var productItemQty = document.createElement("div");
  var spn2 = document.createElement("span");
  productItemQty.classList.add("product-item", "qty");
  productItemLine.appendChild(productItemQty);
  productItemQty.appendChild(spn2);
  var productItemPrice = document.createElement("div");
  var spn3 = document.createElement("span");
  productItemPrice.classList.add("product-item", "price");
  productItemLine.appendChild(productItemPrice);
  productItemPrice.appendChild(spn3);
  var productItemDelete = document.createElement("div");
  var spn4 = document.createElement("span");
  productItemDelete.classList.add("product-item", "delete");
  spn4.innerHTML = "x";
  spn4.onclick = function() {
    deleteThis(this.parentNode.parentNode);
  }
  productItemLine.appendChild(productItemDelete);
  productItemDelete.appendChild(spn4);

  productsLinesBox[0].scrollTop = productsLinesBox[0].scrollHeight;
}

//DELETE LINE//

function deleteThis(productLine) {
  productLine.parentNode.removeChild(productLine);
}
```

```css
.products-lines-box {
  display: inline-block;
  width: 50%;
  margin-left: 14px;
  max-height: 90px;
  overflow-y: auto;
  scroll-behavior: smooth;
}

.products-lines-box::-webkit-scrollbar {
  display: none;
}

.product-item-line {
  display: block;
  width: 100%;
  max-height: 34px;
}

.product-item {
  display: inline-block;
  float: left;
  height: 34px;
  border: 1px solid black;
}

.product-item.sku {
  width: 80%;
  margin-left: 0;
}

.product-item.delete {
  width: 20px;
}

.product-item.delete span {
  font-size: 18px;
}

.new-line-box {
  display: inline-block;
  width: calc(55% - 14px);
  margin: 6px 0 0 14px;
}

.new-line-btn {
  display: inline-block;
  float: left;
  padding: 4.5px 8px 4.5px 8px;
  color: black;
  font-family: sans-serif;
  font-size: 11.5px;
  border: 0.5px solid black;
}
```

```html
<div class="products-lines-box">
  <div class="product-item-line">
    <div class="product-item sku">
      <span></span>
    </div>
    <div class="product-item delete">
    </div>
  </div>
</div>

<div class="new-line-box">
  <button type="button" id="newLineBtn" class="new-line-btn" onclick="addNewLine()">
      <span>Add new line</span>
    </button>
</div>
```