Flex grow till overflow scroll with footer component in sidebar with parent height 100%

Question

I am trying to create a sidebar for my webapp which has a scrollable list in its sidebar. On the bottom of the sidebar there is a small footer. My problem stems from the fact that if I set the max size to 100% it pushes away the footer at the bottom. I know the list needs a parent height that is defined but in this case that is not clear. How can I achieve a growable flex list in my sidebar that automatically overflows to a scrollbar once it filled up the remaining space on the sidebar?

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="w-screen h-screen flex p-16">
  <main class="w-4/6 bg-blue-500 flex items-center justify-center">
    Main
  </main>
  <aside class="w-2/6 h-full flex flex-col gap-8 justify-between">
    <article class="w-full h-full flex flex-col bg-gray-300">
      <header class="text-xl bg-green-500 flex justify-center py-3">
        List
      </header>
      <section class="flex-grow overflow-y-scroll">
        <ul class="p-4 bg-orange-500">
          <li>Number 1</li>
          <li>Number 2</li>
          <li>Number 3</li>
          <li>Number 4</li>
          <li>Number 5</li>
          <li>Number 6</li>
          <li>Number 7</li>
          <li>Number 8</li>
          <li>Number 9</li>
          <li>Number 1</li>
          <li>Number 2</li>
          <li>Number 3</li>
          <li>Number 4</li>
          <li>Number 5</li>
          <li>Number 6</li>
          <li>Number 7</li>
          <li>Number 8</li>
          <li>Number 9</li>
          <li>Number 1</li>
          <li>Number 2</li>
          <li>Number 3</li>
          <li>Number 4</li>
          <li>Number 5</li>
          <li>Number 6</li>
          <li>Number 7</li>
          <li>Number 8</li>
          <li>Number 9</li>
          <li>Number 1</li>
          <li>Number 2</li>
          <li>Number 3</li>
          <li>Number 4</li>
          <li>Number 5</li>
          <li>Number 6</li>
          <li>Number 7</li>
          <li>Number 8</li>
          <li>Number 9</li>
        </ul>
      </section>
      <section class="flex-grow flex justify-center bg-red-600">
        <button>
                Add task +
            </button>
      </section>
    </article>

    <article class="bg-purple-500 flex justify-center">
      Footer component sidebar
    </article>
  </aside>
</div>

EDIT: As visible in the pictures below. Only specifying a max vh results in the webpage not being fully responsive. As long as this doesn't get calculated this will always remain an issue.

Answer 1

Just by using the right tailwind classes, you can achieve the desired result. check below the updated code snippet. And here is the jsFiddle

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="w-screen h-screen flex p-16">
    <main class="w-4/6 bg-blue-500 flex items-center justify-center">
        Main
    </main>
    <aside class="w-2/6 h-full flex flex-col gap-0 justify-between"> <!-- removed gap (optional change) -->
        <article class="w-full flex flex-col bg-gray-300 overflow-hidden"> <!-- added overflow hidden -->
            <header class="text-xl bg-green-500 flex justify-center py-3">
                List
            </header>
            <section class="min-h-0 flex-1 flex-grow overflow-auto"> <!-- added flex-1 class -->
                <ul class="p-4 bg-orange-500">
                    <li>Number 1</li>
                    <li>Number 2</li>
                    <li>Number 3</li>
                    <li>Number 4</li>
                    <li>Number 5</li>
                    <li>Number 6</li>
                    <li>Number 7</li>
                    <li>Number 8</li>
                    <li>Number 9</li>
                            <li>Number 10</li>
                    <li>Number 11</li>
                    <li>Number 12</li>
                    <li>Number 13</li>
                    <li>Number 14</li>
                    <li>Number 15</li>
                    <li>Number 16</li>
                    <li>Number 17</li>
                    <li>Number 18</li>
                    <li>Number 19</li>
                    <li>Number 20</li> 
                </ul>
            </section>
            <section class="flex justify-center bg-red-600"> <!-- removed flex-grow class -->
                <button>
                Add task +
            </button>
            </section>
        </article>
        
        <article class="bg-purple-500 flex justify-center">
            Footer component sidebar
        </article>
    </aside>
</div>