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.

My bad. I hope the edit clears things up a notch – Lightningstorms Nov 06 '20 at 11:17 — Lightningstorms, Nov 06 '20 at 11:17

score 1 · Answer 1 · answered Nov 06 '20 at 11:26

Although there are tons of version for solving this kind of issues, you can solve this by adding a padding-bottom in your sidebar like this:

.min-body {
  min-height: 300px !important;
}

.footer-margin {
  position: relative;
  padding-bottom: 20px !important;
}

.footer {
  position: absolute;
  bottom: 0;
  width:100%;
}

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet"/>
<div class="w-screen h-screen flex p-16 min-body">
  <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 footer-margin">
    <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>
        </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">
      Footer component sidebar
    </article>
  </aside>
</div>

This seems to be the best answer. It stays consistent regardless of any window size. It is not ideal but it works — Lightningstorms, Nov 06 '20 at 12:16

score 1 · Accepted Answer · answered Nov 06 '20 at 12:23

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>

You my friend, win this one. Thank you, this is by far the most ideal solution and works like a beast! — Lightningstorms, Nov 06 '20 at 12:40

score 0 · Answer 3 · answered Nov 06 '20 at 11:18

I modified the html to look like this

<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 flex flex-col bg-gray-300">
            <header class="text-xl bg-green-500 flex justify-center py-3">
                List
            </header>
            <section class="min-h-0 flex-grow overflow-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 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>
        <div>
                    <button>
                Add task +
            </button>
        </div>
            </section>
        </article>
        
        <article class="bg-purple-500 flex justify-center">
            Footer component sidebar
        </article>
    </aside>
</div>

Then this in the css.

ul{
  overflow: scroll;
  height:90vh;
}

I hope this atleast fixes the idea you're going with.

Yeah, I guess the best thing would be the define the heights for all the elements so it would still be responsive but I lose a lot of the simplicity of all the elements automatically taking up the space they requre — Lightningstorms, Nov 06 '20 at 11:22
My biggest gripe with this solution is that I base the padding of the documents in rem. So if I use vh for max height I can never be sure that it will be the same amount on different devices — Lightningstorms, Nov 06 '20 at 11:28
To eleborate: If I view the website on a 16:9 screen I can use max-height: 50vh. Thiis way I have just enough space. But the moment I watch it on a 16:10 the vh is not precisely the same so it still pushes it slightly. — Lightningstorms, Nov 06 '20 at 11:33
But vh implies half the view-height,irrespective of the screen. So how far any element in the page is pushed is relative to the height of the screen. This element with a `height: 50vh;` will always be of height half the screen. — Eric, Nov 06 '20 at 11:39
I edited my initial post with an example to give a general idea about what I mean with it not being responsive — Lightningstorms, Nov 06 '20 at 11:55

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

3 Answers3