title: strange behavior of the offsetheight element
body: <p>I have a part of the page that looks like this (i use pug view engine)</p>
  
  <pre><code>&lt;div class="product"&gt;
      &lt;div class="name"&gt;#{product.product_name}&lt;/div&gt;
      &lt;div class="category"&gt;#{product.category}&lt;/div&gt;
      &lt;div class="description"&gt;
         | #{product.product_description}
      &lt;/div&gt;
      &lt;div class="amount"&gt;#{product.product_amount}&lt;/div&gt;
      &lt;div class="count-stock"&gt;#{product.product_count_stock}&lt;/div&gt;
      &lt;div&gt;
         &lt;a href="/editProductProperties?productId=#{product.product_id}"&gt;
             &lt;img src="images/pencil-white.svg" class="pencil-icon icon" data-product_id="#{product.product_id}"/&gt;
         &lt;/a&gt;
         &lt;img src="images/trash.svg" class="trash-icon icon"/&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And style for this part: </p>
  
  <pre><code>.product {
      display: grid;
      grid-template-columns: [name] 207px [category] 150px [description] 1fr [amount] 100px [count-stock] 100px [action] 54px;
  }
  
  .product &gt; 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;
  }
  
  </code></pre>
  
  <p>And js:</p>
  
  <pre><code>window.onresize = addShowButton;
  
  function addShowButton() {
    productDescriptionList.forEach(el =&gt; {
      if(el.offsetHeight &gt; 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 &lt;= 40) {
        el.style["max-height"] = 'initial';
        el.style.overflow = 'visible';
        if(el.children.length &gt; 0) {
          el.children[0].remove();
        }
      }
    });
  }
  
  addShowButton();
  </code></pre>
  
  <p>The problem is that el.offsetHeight takes either the old element height values or the values before all styles are applied.</p>
  
  <p>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</p>
  
  <p><a href="https://i.stack.imgur.com/m2L4Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m2L4Y.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/Ev0le.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Ev0le.png" alt="enter image description here"></a></p>