strange behavior of the offsetheight element

Question

I have a part of the page that looks like this (i use pug view engine)

<div class="product">
    <div class="name">#{product.product_name}</div>
    <div class="category">#{product.category}</div>
    <div class="description">
       | #{product.product_description}
    </div>
    <div class="amount">#{product.product_amount}</div>
    <div class="count-stock">#{product.product_count_stock}</div>
    <div>
       <a href="/editProductProperties?productId=#{product.product_id}">
           <img src="images/pencil-white.svg" class="pencil-icon icon" data-product_id="#{product.product_id}"/>
       </a>
       <img src="images/trash.svg" class="trash-icon icon"/>
    </div>
</div>

And style for this part:

.product {
    display: grid;
    grid-template-columns: [name] 207px [category] 150px [description] 1fr [amount] 100px [count-stock] 100px [action] 54px;
}

.product > div:not(:last-child) {
    padding-right: 5px;
}

.product {
    padding: 20px 0;
    border-top: 1px solid #f2f2f2;
    position: relative;
}

.product::after {
    width: 0;
    height: 0;
    border-top: 100px solid red; 
    border-right: 100px solid transparent;
    position: absolute; 
}

.product .description {
    position: relative;
}

.product .description .showButton {
    position: absolute;
    top: 10px;
    right: 0;
    text-decoration: underline;
    cursor: pointer;
}

.product:last-child {
    border-bottom: 1px solid #f2f2f2;
}

.product:hover {
    background: #555454;
}

And js:

window.onresize = addShowButton;

function addShowButton() {
  productDescriptionList.forEach(el => {
    if(el.offsetHeight > 40) {
      if(el.children.length === 0) {
        let showButton = document.createElement('span');
        showButton.className = 'showButton';
        showButton.innerText = 'Показать полностью';
        el.append(showButton);
      }
      el.style["max-height"] = '40px';
      el.style.overflow = 'hidden';
    } else if(el.offsetHeight <= 40) {
      el.style["max-height"] = 'initial';
      el.style.overflow = 'visible';
      if(el.children.length > 0) {
        el.children[0].remove();
      }
    }
  });
}

addShowButton();

The problem is that el.offsetHeight takes either the old element height values or the values before all styles are applied.

That is, I look at the height value of the element in the inspector and it is 80, and offsetHeight = 36 in console and I can not understand why this is