Tailwind中Div无法扩展至max-w-prose宽度的技术问询

问题核心：红色父div作为flex items-center容器的子元素，默认会收缩至内容宽度，导致子div的w-full无法触达max-w-prose的上限。

方案一：简化布局实现自动适配 #

修改section的布局类，移除items-center，给红色父div添加mx-auto，让它根据子元素的max-w-prose自动撑开宽度（包含自身内边距）并居中：

<section class="sm:px-pad-x mx-auto flex flex-col lg:px-0">
  <div class="mb-8 rounded-xl bg-red-200 px-4 py-8 shadow-xl backdrop-blur-lg sm:p-8 md:p-12 lg:p-16 mx-auto">
    <div class="flex w-full max-w-prose flex-col items-center gap-8">
      <h2 class="w-full">Related Posts</h2>
    </div>
  </div>
</section>

方案二：精确控制父div最大宽度 #

如果需要保留items-center，给红色父div添加w-full，并根据不同断点的内边距计算对应的最大宽度，确保父div宽度为max-w-prose加上左右内边距总和：

<section class="sm:px-pad-x mx-auto flex flex-col items-center lg:px-0">
  <div class="mb-8 rounded-xl bg-red-200 px-4 py-8 shadow-xl backdrop-blur-lg sm:p-8 md:p-12 lg:p-16 w-full max-w-[calc(theme(max-w-prose)+theme(spacing[8]))] sm:max-w-[calc(theme(max-w-prose)+theme(spacing[16]))] md:max-w-[calc(theme(max-w-prose)+theme(spacing[24]))] lg:max-w-[calc(theme(max-w-prose)+theme(spacing[32]))]">
    <div class="flex w-full max-w-prose flex-col items-center gap-8">
      <h2 class="w-full">Related Posts</h2>
    </div>
  </div>
</section>

方案一更简洁，利用mx-auto实现自适应居中；方案二则通过计算式精确控制尺寸，适合需保留原容器布局的场景。

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