使用嵌套的 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 容器宽度。 有人有想法吗？它应该是这样的：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）