固定 flex 容器边距底部 (tailwind/vue)

问题描述

我有一个很大的覆盖层作为固定容器，其中有一些要显示的元素。我想要存档的是，在容器底部添加边距/填充，以防止元素溢出固定容器并正确定位容器内的项目。但我不能让它工作。每次我添加边距时，边距都会超出底部的容器。无论我使用填充还是边距，一切都一样。左侧/顶部/右侧的边距效果很好。但底部的边距/填充没有。

这是我的代码的一部分：

<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 bottom-0 shadow-rb rounded-lg overflow-hidden"
>
  <Header
  /> //here i want the margins for the sides to stay content inside this container
  <div class="flex mt-6 my-8 overflow-hidden"> //here the margins works except the margin for bottom (my-8 means margin-top and margin-bottom 24px)
    <div class="flex-1">
      <Some Content
      />
      <img :src="someImage" class="w-full h-52 mt-4 pr-4" />
      <div class="w-full left-0 bottom-0 overflow-x-hidden overflow-y-auto">
        <div class="h-full">
       < Some Content />
        </div>
      </div>
    </div>
    <div class="flex-1">
      <div class="mx-4">
        <Some Content>
      </div>
    </div>
    <div class="ml-4 flex-1">
      <Some Content />
      <div class="flex">
        <div class="flex flex-col w-1/2 mt-4"> <Some Content/>
        </div>
      </div>
    </div>
  </div>
</div>

解决方法

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

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

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