如何解决固定 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 举报,一经查实,本站将立刻删除。