为什么我的溢出隐藏不工作?水平滚动条仍然可见



我试图将矩形向右移动以使其与图像对齐,但是当我这样做时,下面有一个滚动条,我想删除它

<section class="relative ">
<div class="container flex flex-col-reverse lg:flex-row items-center gap-12 mt-14 lg:mt-28">
<!-- Content -->
<div class="flex flex-1 flex-col items-center lg:items-start">
<h2 class="text-bookmark-blue text-3xl md:text-4 lg:text-5xl text-center lg:text-left mb-6">
A Simple Bookmark Manager
</h2>
<p class="text-bookmark-green text-lg text-center lg:text-left mb-6">
A clean and simple interface to organize your favourite websites. Open a mew tab and see it load instantly. Try it
for free.
</p>
<div class="flex justify-center flex-wrap gap-6">
<button type="button" class="btn btn-purple hover:bg-bookmark-white hover:text-black">Get it on Chrome</button>
<button type="button" class="btn btn-white hover:bg-bookmark-purple hover:text-white">Get it on Firefox</button>
</div>
</div>
<!-- Image -->
<div class="flex justify-center flex-1 mb-10 md:mb-16 lg:mb-0 z-10">
<img class="w-5/6 h-5/6 sm:w-3/4 sm:h-3/4 md:w-full md:h-full" src="/public/imgs/hero-bg.png" alt="" srcset="" />
</div>
</div>
<!-- Rounded Rectangle -->
<div
class="hidden md:block overflow-hidden bg-bookmark-purple rounded-l-full absolute h-80 w-2/4 top-32 right-0 lg:-bottom-28 lg:-right-36"
></div>
</section>

附图片供参考

https://prnt.sc/5Cf7y_5rUabl

overflow-hidden必须应用于容器元素(即父元素),而不是应用于您希望在离开其容器时被切断的元素。

如果由于某种原因不能对容器应用overflow-hidden,则在原始容器和相关元素(即原始容器的子元素,但同时是要被切割的元素的父元素)之间添加另一个层元素,并对插入的元素应用overflow-hidden

最新更新