使用嵌套的弹性容器滚动固定容器的一部分（vue/tailwind）

Posted 2023-03-07

【中文标题】使用嵌套的弹性容器滚动固定容器的一部分（vue/tailwind）

【英文标题】：Scroll a part of a fixed container with nested flex containers (vue/tailwind)

【发布时间】：2021-06-17 02:21:30

【问题描述】：

我有一些具有固定属性的覆盖容器，在里面我需要三个彼此相邻的 flex col div。在第一个 flex-col div 中，我在底部有一个 div，其中包含两个组件（flex-col），我需要使其可滚动。但我找不到任何方法来归档该容器以使其可滚动。这是我的代码：

<div
class="fixed top-10 bottom-10 h-4/5 flex flex flex-col justify-center left-10 right-10 z-1003 overflow-hidden">
<div class="w-full h-full bg-white left-10 right-10 shadow-rb rounded-lg">
  <Some HEader (not visible in my attached photo)
  />
  <div class="flex flex-row mx-8 my-6">
    <div class="flex-1">
      <div class="flex flex-col">
        <SomeUnscrollableContent/>
        <img :src="someImage" class="w-full h-52 mt-4" />
        <div class="flex flex-col flex-1 w-full h-full z-1001">
          <div
            class="w-full h-full top-0 bottom-0 left-0 overflow-y-scroll"
          >
          **HERE IS MY SCROLLABLE CONTENT**
          <Component 1 />
          <Component 2 />
          </div>
        </div>
      </div>
    </div>
    <div class="ml-2 flex-1 border-solid border border-black-normal">
      <div class="flex flex-col"></div>
    </div>
    <div class="ml-2 flex-1 border-solid border border-black-normal">
      <div class="flex flex-col"></div>
    </div>
  </div>
</div>

我尝试了多次尝试，还将可滚动内容之前的 div 设置为绝对值，这导致内容占据了整个 flex 容器的宽度。 有人有想法吗？它应该是这样的：

【参考方案1】：

尝试添加以下给定的类。 Demo

<div class="flex min-h-screen max-h-screen overflow-hidden p-4">
  <div class="flex flex-1">
    <div class="flex flex-1 bg-blue-100">
      <div class="flex flex-col flex-1">
        <div class="flex h-48 bg-gray-50">1</div>
        <div class="flex h-48 bg-gray-100">2</div>
        <div class="flex flex-1 bg-gray-200 overflow-x-hidden">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolores eos aliquid tenetur at reprehenderit rem fugit provident sed, est eligendi animi quo quod suscipit labore tempora mollitia ratione ut quasi? Praesentium fugiat rem, sed, animi veniam esse expedita, distinctio exercitationem aperiam rerum magnam vel doloremque! Aliquid eos minima atque soluta voluptatum, saepe in aliquam numquam quo inventore, dolores tempora omnis. Eveniet exercitationem temporibus aspernatur quibusdam tenetur! Debitis nisi facere necessitatibus blanditiis distinctio atque repudiandae ipsum autem. Consequatur maiores ut illum aliquam, non, numquam provident explicabo ex, vero in sit amet? Expedita optio veniam nulla odio, culpa aut officia excepturi iste! Quo veniam distinctio soluta corrupti? Ex quidem nihil, aspernatur soluta dignissimos optio, natus at totam blanditiis dolores inventore mollitia officia? Deserunt tenetur eaque iste, non et id molestiae vitae ex quisquam aspernatur eum, voluptates vero, perspiciatis molestias nam ipsam exercitationem qui nemo ratione ab consectetur blanditiis quaerat debitis ad? Repudiandae.</div>
      </div>
    </div>
    <div class="flex flex-1">22</div>
    <div class="flex flex-1">33</div>
  </div>
</div>

【讨论】：

不幸的是，您的示例对我不起作用，因为溢出内容超出了我定义的 h-4/5 固定容器。所以我能够滚动，但内容溢出了 4/5 高度的容器。还有，我忘了提到：在我的可滚动内容中，我需要在 fly-col 中而不是在 fly-row 容器中显示两个不同的组件。我试图归档的是：我的两个组件的可滚动内容应该是可滚动的，但始终保持在我的 4/5 屏幕高度的固定外部容器内。这整个事情应该表现得像一些叠加层。