मैं अपने Vuejs ऐप में टेलविंड का उपयोग कर रहा हूं। मेरे पास यह सरल टेम्पलेट है

<template>
  <div class="bg-gray-500 h-screen">
    <Header /><!-- //height 32 -->
    <div class="w-2/3 mx-auto p-4 text-lg bg-white h-full shadow-lg">
      <router-view />
    </div>
  </div>
</template>

h-screen वाला डिव रूट या माई ऐप है। घटक<header> की टेलविंड ऊंचाई h-32 है

समस्या यह है कि दूसरा div पृष्ठ को नीचे स्क्रॉल करने का कारण बनता है, <header> (h-32) की ऊंचाई।

मुझे क्या करने का मन है

यदि कोई सामग्री नहीं है, तो मैं चाहता हूं कि दूसरा div स्क्रीन की शेष ऊंचाई को भर दे लेकिन अब और नहीं। यदि सामग्री है, तो मैं चाहता हूं कि यह आवश्यकतानुसार बढ़े।