Tailwind Css - Extending background colour upon scroll of view

Question

So I was trying to make my content area scrollable which worked but in doing so of course the background color of the page this not extend all the way. I have try several things and just can't seem to get it to extend all the way

So the structure is like this App.vue (where the router view resides) -> Manage job view (where the header component resides and the job component) -> job component

Here a bit of my code as reference. I hope somebody can help me out. I think its not extending (code from job component) because the other components/views build on top of the job one also have css (flex etc) defined that might cause the issue, but I am not 100% sure

App.vue

<template>
  <div class="h-screen flex">
    <div class="flex flex-col flex-1">
        <router-view></router-view>
    </div>
</div>

Manage job view

<template>
<div class="mx-aut h-full bg-mediumDarkGrey">
    <DashboardHeaderAdminComponent></DashboardHeaderAdminComponent>    
    <!-- content area -->
    <div class="container w-full mx-auto pt-20 h-screen">
        <div class="w-full px-4 md:px-0 md:mt-40 mb-16 text-gray-800 leading-normal">
            <!-- start actual content -->
            <!-- page title -->
            <div>
                <h1 class="text-pumpkin uppercase text-2xl mb-6 w-full border-b-4 pb-6 border-pumpkin">Manage Jobs</h1>
            </div>
            <!-- sub nav -->
            <div>
                <ul class="flex">
                    <li class="mr-3 jobFreelancer" v-on:click="ToggleJobFreelancer = !ToggleJobFreelancer"> 
                        <a @click="ToggleJobInfluencer = !ToggleJobInfluencer" class="inline-block border border-pumpkin rounded py-1 px-3 bg-blue-500 text-pumpkin hover:text-white hover:border-white uppercase" href="#">Add job for Freelancer</a>
                    </li>
                    <li class="mr-3 jobInfluencer" v-on:click="ToggleJobInfluencer = !ToggleJobInfluencer">
                        <a @click="ToggleJobFreelancer = !ToggleJobFreelancer" class="inline-block border border-pumpkin rounded text-pumpkin hover:border-white hover:text-white py-1 px-3 uppercase" href="#">Add job for Influencer</a>
                    </li>
                </ul>
            </div>
            <!-- content job freelancer -->
            <div class="mt-12" :class=" ToggleJobFreelancer ? 'block' : 'hidden' ">
                <JobFreelancer></JobFreelancer>
            </div>
            <!-- content job freelancer -->
            <!-- if  ToggleJobInfluencer is open then its visibile (default block) otherwise its hidden-->
            <div class="mt-12" :class=" ToggleJobInfluencer ? 'block' : 'hidden'  " >
                <JobInfluencer ></JobInfluencer>
            </div>
        </div>
    </div>   
</div>

Job component view

<template>
<div class="h-screen">
        <div class="pb-6">
            <h1 class="text-white uppercase font-semibold">Post a freelancer job</h1>
        </div>
        <!-- Scroll wrapper -->
        <div class="flex flex-1 ">
            <!-- List jobs -->
            <div class="bg-darkGrey pl-6 flex flex-1 overflow-y-hidden w-7/12">
                <!-- Scrollable container -->
                <div class="flex-1 flex-col flex overflow-y-hidden">
                    <div class="">
                        <table id="tblJobFreelancers" class="w-full flex flex-row flex-no-wrap sm:bg-white rounded-lg overflow-hidden sm:shadow-lg my-5">
                            <thead class="text-white uppercase">
                                <tr class="bg-pumpkin flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                                    <th class="p-3 text-left">Job</th>
                                    <th class="p-3 text-left">Freelancer</th>
                                    <th class="p-3 text-left">Deadline</th>
                                    <th class="p-3 text-left">Completed</th>
                                    <th class="p-3 text-left" width="110px">Manage</th>
                                </tr>
                                <tr class="bg-mellowLightBlue flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                                    <th class="p-3 text-left">Job</th>
                                    <th class="p-3 text-left">Freelancer</th>
                                    <th class="p-3 text-left">Deadline</th>
                                    <th class="p-3 text-left">Completed</th>
                                    <th class="p-3 text-left" width="110px">Manage</th>
                                </tr>
                                <tr class="bg-mellowLightBlue flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                                    <th class="p-3 text-left">Job</th>
                                    <th class="p-3 text-left">Freelancer</th>
                                    <th class="p-3 text-left">Deadline</th>
                                    <th class="p-3 text-left">Completed</th>
                                    <th class="p-3 text-left" width="110px">Manage</th>
                                </tr>
                                <tr class="bg-mellowLightBlue flex flex-col flex-no wrap sm:table-row rounded-l-lg sm:rounded-none mb-2 sm:mb-0">
                                    <th class="p-3 text-left">Job</th>
                                    <th class="p-3 text-left">Freelancer</th>
                                    <th class="p-3 text-left">Deadline</th>
                                    <th class="p-3 text-left">Completed</th>
                                    <th class="p-3 text-left" width="110px">Manage</th>
                                </tr>
                            </thead>
                            <tbody class="flex-1 sm:flex-none">
                                <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
                                    <td class="border-grey-light border p-3">Wordpress website</td>
                                    <td class="border-grey-light border p-3 truncate">John Doe</td>
                                    <td class="border-grey-light border p-3 truncate">24/05/2020</td>
                                     <td class="no border-grey-light border p-3 truncate">No</td>
                                    <td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
                                </tr>
                                <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
                                    <td class="border-grey-light border p-3">Mobile app</td>
                                    <td class="border-grey-light border p-3 truncate">Jane Doe</td>
                                    <td class="border-grey-light border p-3 truncate">12/05/2020</td>
                                    <td class="yes border-grey-light border p-3 truncate">Yes</td>
                                    <td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
                                </tr>
                                <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
                                    <td class="border-grey-light border p-3">Flyer design </td>
                                    <td class="border-grey-light border p-3 truncate">Jane Doe</td>
                                    <td class="border-grey-light border p-3 truncate">1/05/2020</td>
                                     <td class="yes border-grey-light border p-3 truncate">Yes</td>
                                    <td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
                                </tr>
                                <tr class="flex flex-col flex-no wrap sm:table-row mb-2 sm:mb-0">
                                    <td class="border-grey-light border p-3">Marketing campaign </td>
                                    <td class="border-grey-light border p-3 truncate">John Doe</td>
                                    <td class="border-grey-light border p-3 truncate">28/04/2020</td>
                                     <td class="no border-grey-light border p-3 truncate">No</td>
                                    <td class="border-grey-light border p-3 cursor-pointer">Edit - Delete</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- Form -->
            <div class="bg-darkGrey p-6 flex  overflow-y-hidden w-5/12">
                <!-- Scrollable container -->
                <!-- Form -->
                <div class="flex-1 flex-col flex overflow-y-hidden">
                    <form class="overflow-x-hidden"  @submit.prevent="postNow" ref="jobFreelancerForm" method="post">
                        <div class="relative w-full">
                            <label for="email" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2">Job Title</label>
                            <div>
                                <input id="title" type="text" class="pt-8 w-full rounded p-3 text-pumpkin" name="job.title" v-model="job.title" autocomplete="user.title" autofocus placeholder="job title">
                            </div>
                        </div>

                        <div class="relative w-full pt-6">
                            <label for="requirements" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2 ">Job Requirements</label>
                            <textarea class="pt-12 w-full text-pumpkin rounded" rows="6"  name="requirements">
                            Lorem Ipsum ...</textarea>
                        </div>

                        <div class="relative w-full pt-6">
                            <label for="description" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2 ">Job Description</label>
                            <textarea class="pt-12 w-full text-pumpkin rounded" rows="6"  name="description">
                            Lorem Ipsum ...</textarea>
                        </div>

                        <div class="flex justify-between pt-6">
                            <div class="relative w-full">
                                <label for="deadline" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2">Deadline</label>
                                <div>
                                    <input id="deadline" type="text" class="pt-8 w-full rounded p-3 text-pumpkin" name="job.deadline" v-model="job.deadline" autocomplete="user.deadline" autofocus placeholder="deadline">
                                </div>
                            </div>
                            <div class="m-2"></div>
                            <div class="relative w-full">
                                <label for="compensation" class="uppercase text-pumpkin font-bold absolute pl-3 pt-2">Compensation</label>
                                <div>
                                    <input id="compensation" type="text" class="pt-8 w-full rounded p-3 text-pumpkin" name="job.compensation" v-model="job.compensation" autocomplete="user.compensation" autofocus placeholder="compensation">
                                </div>
                            </div>
                        </div>

                        <div class="pt-8">
                            <button type="submit" class="uppercase font-bold rounded w-full bg-white text-pumpkin py-2 px-3 text-2xl" >Post job</button>
                        </div>  
                    </form>
                </div>
            </div>
        </div>       
</div>

Answer 1

Instead of using h-screen in the App.vue class use h-full min-h-screen.