如何让 Tailwind flex column 全屏，但不再

Question

我的屏幕是灰色背景，左边三分之一处有一个白框。白框一直向下延伸到屏幕下方，停在外部 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>

Answer 1

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

如何让 Tailwind flex column 全屏，但不再

How to make Tailwind flex colum full screen, but no longer

html

css

tailwind-css