Flex 增长直到溢出滚动，侧边栏中的页脚组件具有父高度 100%

Question

我正在尝试为我的网络应用程序创建一个侧边栏，它的侧边栏中有一个可滚动列表。在侧边栏的底部有一个小页脚。我的问题源于这样一个事实，即如果我将最大尺寸设置为 100%，它会推开底部的页脚。我知道该列表需要一个已定义的父级高度，但在这种情况下尚不清楚。我怎样才能在我的侧边栏中实现一个可增长的弹性列表，一旦它填满侧边栏上剩余的 space 就会自动溢出到滚动条？

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

编辑：如下图所示。仅指定最大 vh 会导致网页无法完全响应。只要不进行计算，这将始终是一个问题。

Answer 1

我修改了 html 看起来像这样

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

然后这个在css.

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

我希望这至少能解决您的想法。

Answer 2

尽管有很多版本可以解决此类问题，但您可以通过在边栏中添加 padding-bottom 来解决此问题，如下所示：

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

Answer 3

只需使用正确的顺风类，您就可以达到预期的效果。检查下面更新的代码片段。这是 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>

Flex 增长直到溢出滚动，侧边栏中的页脚组件具有父高度 100%

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

html

css

flexbox

webkit-overflow-scrolling