Solution:

Thanks to @Kalimah, this works in 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"  :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>

It will expand the div to its height-auto size with a smooth transition.

Original Question:

I'm trying to compute the true height of all text in this component, despite part of it being hidden by overflow: hidden (tailwind):

<script setup>

const state = reactive({
    meetCardHeight: 100
})

</script>

<template>
  <div ref="element"  :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>

The current component height is set to 100px for the overflow property to take effect. Is there a way to determine the height that h1 and p tags would result in, if overflow would not be present?

CodePudding user response：

You can find the height with scrollHieght property. It is a native JS property and is independet of vue or any other libraries.

Example:

console.log("Full Height", document.querySelector(".container").scrollHeight   "px");

.container{
height: 100px;
overflow: hidden;
}

<div >

    <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!
    
    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!
    
    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>