将滚动应用到 f​​lex 容器的特定部分

Posted 2023-03-07

【中文标题】将滚动应用到 f​​lex 容器的特定部分

【英文标题】：Applying scroll to specific section of flex container

【发布时间】：2020-12-06 18:36:22

【问题描述】：

<div class="flex flex-grow h-full w-100">
  <div class="flex flex-col bg-white w-1/5">
    <div class="dates px-4">
      <p>Today</p>
      <p>Tomorrow</p>
      <p>Upcoming</p>
    </div>
    <hr />
    <div class="projects flex-grow px-4">
      <p>Project 1</p>
      <p>Project 2</p>
    </div>
    <div class="footer">
      <hr />
      <button class="outline-none py-2 border-gray-400 text-red-400 w-full">
        Add project
      </button>
    </div>
  </div>
  <div class="main bg-gray-100 flex-grow">Hello</div>
  <div class="bg-white w-1/5">Hello</div>
</div>

在上面的代码中，我希望只有 projects 类的 div 可以滚动，同时将 dates 和 footer 固定在它们的位置上。如何使用 tailwind.css 做到这一点？！我还希望 main 类的 div 可以垂直滚动，同时将其他两个 div 固定在它们的位置而不滚动。

【参考方案1】：

这听起来有点像overflow-y 的常用用法。

例如，您可以将此CSS 规则添加到项目的类中：

.projects 
   overflow-y: scroll;

您可以将此规则添加到您希望可滚动的任何容器中 - 在这种情况下是垂直的。

---

另一方面，overflow-x: scroll 用于水平滚动，overflow: scroll 用于两者（简写）。

【参考方案2】：

根据tailwind overflow guide，可以使用.overflow-y-auto进行垂直滚动。

例如 <div class="projects flex-grow overflow-y-auto px-4">

您使用.flex-grow 很好，否则您必须为 div 指定最大高度。

【参考方案3】：

<div class="flex flex-grow h-full w-100">
  <div class="flex flex-col bg-white w-1/5">
    <div class="dates px-4">
      <p>Today</p>
      <p>Tomorrow</p>
      <p>Upcoming</p>
    </div>
    <hr/>
    <div class="projects h-auto overflow-x-auto flex-grow px-4">
      <p>Project 1</p>
      <p>Project 2</p>
    </div>
    <div class="footer">
      <hr/>
      <button class="outline-none py-2 border-gray-400 text-red-400 w-full">
        Add project
      </button>
    </div>
  </div>
  <div class="main bg-gray-100 flex-grow">Hello</div>
  <div class="bg-white w-1/5">Hello</div>
</div>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。