如何使 Tailwind flex 列全屏显示，但不再显示

Posted 2023-03-07

【中文标题】如何使 Tailwind flex 列全屏显示，但不再显示

【英文标题】：How to make Tailwind flex colum full screen, but no longer

【发布时间】：2021-09-27 15:00:59

【问题描述】：

我的屏幕是灰色背景，左侧三分之一处有一个白色框。白色框一直延伸到屏幕下方，停在外部 div 的填充处。最终结果是白色框被灰色背景很好地框住了。

白框由两列组成，右列中有一个列表。当列表很短时，白框按预期框起来。然而，当列表增长时，白框也会增长并延伸到屏幕底部。在这种情况下，我失去了 div 底部的漂亮框架效果。

如何让右栏中的内容滚动而不是白框变大？最好使用 flexbox？

下面的代码说明了使用 Tailwind CSS 的候选名单方案。

<div class="flex flex-col min-h-screen bg-gray-100 p-6">

<main class="flex flex-grow">

    <div class="flex w-1/3 bg-white border border-gray-200">

        <div class="w-1/2 p-4">
            <p>Let column</p>
        </div>

        <div class="flex flex-col w-1/2 p-4">
            <p>Right column</p>
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
            </ul>
        </div>

    </div>

</main>

</div>

【参考方案1】：

为了让溢出滚动，您需要防止所有父元素溢出。在您的情况下，最外层的 div 应该被赋予 max-h-screen 和 overflow-hidden，而您的 main 元素和右列的父 div 都需要 overflow-hidden。然后你的ul 可以被赋予flex-1 和overflow-y-auto，一旦内容超过父级的高度，你应该得到滚动条。这是假设您希望右列有一个标题并且列表本身是可滚动的，如果您希望标题与列表一起滚动，您可以在它们周围包裹一个 div。

这是您在 Tailwind Play https://play.tailwindcss.com/iYcSWqYkai 上进行上述更改的示例

<div class="flex flex-col min-h-screen max-h-screen overflow-hidden bg-gray-100 p-6">
  <main class="flex flex-grow overflow-hidden">
      <div class="flex w-1/3 bg-white border border-gray-200">

          <div class="w-1/2 p-4">
              <p>Left column</p>
          </div>

          <div class="flex flex-col w-1/2 p-4 overflow-hidden">
              <p>Right column</p>
              <ul class="flex-1 overflow-y-auto">
                  <li class="py-20">Item 1</li>
                  <li class="py-20">Item 2</li>
                  <li class="py-20">Item 3</li>
                  <li class="py-20">Item 4</li>
                  <li class="py-20">Item 5</li>
                  <li class="py-20">Item 6</li>
              </ul>
          </div>
      </div>
  </main>
</div>