Trying to make equal height elements in Vue 3 / TypeScript / Quasar but it doesn't always work

Question

In my Vue 3 / TypeScript / Quasar app I am trying to make all elements with a class of .plan-item have a matching height.

To do this I am using the below code:

const fixRowHeights = () => {
  // Find the tallest element
  let tallestHeight = 0;
  document.querySelectorAll('.plan-item').forEach((item) => {
    const height = item.clientHeight;
    if (height > tallestHeight) {
      tallestHeight = height;
    }
  });
  // Adjust the height of the elements
  document.querySelectorAll('.plan-item').forEach((item) => {
    item.setAttribute(
      'style',
      'min-height:' + tallestHeight.toString() + 'px;'
    );
  });
};

onMounted(() => {
  fixRowHeights();
});

Sometimes when I save my code and preview it in the browser, the code works. All heights are the same.

But then I refresh the page, and it stops working. The heights are not the same anymore.

Why is this happening? And how do I fix it?

Answer 1

I fixed this by changing min-height to height.

Not sure why that helps, but it works now.