溶液：

感谢@Kalimah，这在composition api & script setup中有效：

<script setup>
const state = reactive({
    meetCardHeight: 100
})

const element = ref(null)

const changeElementHeight = () => {
    if (state.meetCardHeight !== element.value.scrollHeight) {
        state.meetCardHeight = element.value.scrollHeight
    } else {
        state.meetCardHeight = 100
    }
}
</script>

<template>
  <div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}" @click="changeElementHeight">

    <h1>Hello World</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>

  </div>
</template>

它会将div扩展到其height-auto大小，并进行平滑过渡。

原始问题：

我试图计算这个component中所有文本的真实height，尽管它的一部分被overflow: hidden（tailwind）隐藏了：

<script setup>

const state = reactive({
    meetCardHeight: 100
})

</script>

<template>
  <div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}">

    <h1>Hello World</h1>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>

  </div>
</template>

当前组件高度设置为100px，overflow属性才能生效。如果overflow不存在，是否有方法确定h1和p标记将产生的height？