如何让横向滚动容器突破父元素的内边距与最大宽度限制？

问题背景 #

父级<section>元素设置了左右内边距（X轴共20px）及max-w-[1600px]的最大宽度，且居中对齐：

<section class="max-w-[1600px] m-auto w-full h-[100dvh] py-5 px-5">

子级是基于flex布局的横向滚动容器：

<div class="flex flex-nowrap overflow-auto gap-9 flex-1">

完整初始结构如下：

<section class="max-w-[1600px] m-auto w-full h-[100dvh] py-5 px-5">
    <div class="flex flex-nowrap overflow-auto gap-9 flex-1"> <!-- 横向滚动容器 -->
        <div class="w-[300px] bg-red-50" style="flex: 0 0 auto;"></div>
        <div class="w-[300px] bg-red-50" style="flex: 0 0 auto;"></div>
        <div class="w-[300px] bg-red-50" style="flex: 0 0 auto;"></div>
        <div class="w-[300px] bg-red-50" style="flex: 0 0 auto;"></div>
    </div>
</section>

需求：让这个横向滚动容器绕过父元素的右侧内边距及1600px最大宽度限制，使滚动区域右侧延伸至屏幕边缘。

解决方案 #

通过给滚动容器添加负外边距计算式抵消父元素约束，实现延伸效果。修改后的代码如下：

<section class="max-w-[1600px] m-auto w-full h-[100dvh] py-5 px-5">
    <div class="flex flex-nowrap overflow-auto gap-9 h-full mr-[calc(-100vw+100%)]">
        <div class="w-[3000px] bg-red-50" style="flex: 0 0 auto;"></div>
        <div class="w-[3000px] bg-red-50" style="flex: 0 0 auto;"></div>
        <div class="w-[3000px] bg-red-50" style="flex: 0 0 auto;"></div>
        <div class="w-[3000px] bg-red-50" style="flex: 0 0 auto;"></div>
    </div>
</section>

<script src="https://cdn.tailwindcss.com"></script>

原理说明 #

• mr-[calc(-100vw+100%)]：该计算式让容器右侧外边距为负，数值等于视口宽度减去父元素可用宽度，从而让滚动容器右侧直接延伸到屏幕边缘，同时保留父元素的左侧内边距和整体居中布局。
• 若需突破左侧内边距限制，可额外添加ml-[-5px]（对应父元素px-5的左侧内边距值）。
• 可选优化：若不想显示横向滚动条，可添加scrollbar-hide类（需在Tailwind配置中启用该工具类，或自定义CSS实现滚动条隐藏）。

内容的提问来源于stack exchange，提问作者Kadiem Alqazzaz