使用嵌套的 flex 容器滚动固定容器的一部分vue/tailwind

如何解决使用嵌套的 flex 容器滚动固定容器的一部分vue/tailwind

我有一些具有固定属性的覆盖容器，在里面我需要三个相邻的 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 容器宽度。 有人有想法吗？它应该是这样的：

解决方法

尝试添加以下给定的类。 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>