I'm currently working on a website layout and trying to set the height of the child blocks to 100% so that they stretch to the full height regardless of monitor size. I've tried using 100vh, but it's not working as expected.
My goal is to achieve a layout similar to the one in the image below:
https://i.sstatic.net/xsx5j.jpg
The orange block is supposed to be associated with scrolling, but I only want to stretch the orange block itself. While the layout may not be perfect, I have tried to keep it clean. You can view an example of this layout in action on codesandbox.
I will include the code below, but it's quite extensive. Therefore, I recommend reviewing the code in the codesandbox link provided for easier readability.
<template>
<div>
/* The rest of the code goes here... */
</div>
</template>
/* CSS styles go here... */
/* JavaScript section... */