Попутный ветер Css - расширение цвета фона при прокрутке вида

Question

Итак, я пытался сделать прокручиваемую область содержимого, которая работала, но при этом, конечно, цвет фона страницы не расширялся полностью. Я пробовал несколько вещей и просто не могу заставить его расширяться до конца

Таким образом, структура похожа на это приложение. vue (где находится представление маршрутизатора) -> Управление представлением задания (где находится компонент заголовка и компонент задания) -> компонент задания

Здесь немного моего кода для справки. Я надеюсь, что кто-нибудь может мне помочь. Я думаю, что он не расширяется (код из компонента задания), потому что другие компоненты / представления строятся поверх задания, в котором также определены css (flex et c), которые могут вызвать проблему, но я не уверен на 100%

Приложение. vue

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

Управление просмотром заданий

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

Вид компонента задания

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