overflow:hidden不生效怎么办？调整矩形后水平滚动条仍存在

问题出在你给圆角矩形设置了负右偏移（lg:-right-36），导致元素超出视口范围，且你之前的overflow:hidden未加在正确的父容器上。

具体修复步骤 #

给包裹所有元素的<section>添加overflow-hidden类——这个section是圆角矩形的定位父级（已设置relative），只有在它身上设置溢出隐藏，才能裁剪掉超出的部分。

修改后的完整代码片段 #

<section class="relative overflow-hidden">
    <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 new 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 bg-bookmark-purple rounded-l-full absolute h-80 w-2/4 top-32 right-0 lg:-bottom-28 lg:-right-36"
    ></div>
</section>

补充说明 #

• 你之前给圆角矩形自身加overflow:hidden无效，因为溢出隐藏是作用于父容器，用来裁剪子元素超出的部分，而非给溢出元素本身添加。
• 确认你的container类未设置overflow-x:visible属性，否则可能影响效果（Tailwind默认container不会有此问题）。

内容的提问来源于stack exchange，提问作者Trayansh Agarwal