Vue组件按钮设置Tailwind justify-end右对齐不生效如何解决

问题场景 #

在Vue组件表单的模态框操作区，需要实现取消、提交按钮右对齐效果，项目使用Tailwind CSS作为样式框架。已给按钮容器div添加flex items-center justify-end类，但按钮始终保持左对齐，未达到预期。
现有代码如下：

<template slot="modal_actions">
    <div class="flex items-center justify-end">
        <close-overlay class="h-full" identifier="addNewScheduleModal">
            <cs-button variant="blank">Cancel</cs-button>
        </close-overlay>
        <disables-submit-on-errors
            :identifier="identifier"
            @proceed="addNewSchedule"
        >
        <loading-button ref="submitBtnSave" size="normal">
            Save & Close
        </loading-button>
        </disables-submit-on-errors>
    </div>
</template>

核心原因 #

justify-end的生效前提是flex容器存在水平方向的剩余空间，当前按钮容器没有撑满modal_actions插槽对应父容器的全部宽度，容器宽度刚好等于内部按钮总宽度，没有多余空间把内容推到右侧，视觉上就还是左对齐。
另外两个自定义包裹组件如果没有做样式透传，默认的块级/内联属性也可能打乱flex子元素的排布逻辑。

修复步骤 #

• 第一步：给按钮容器添加w-full类，强制容器撑满父级可用宽度，同时添加gap-3给两个按钮预留统一间距，容器类修改为w-full flex items-center justify-end gap-3
• 第二步：如果第一步调整后仍不生效，给两个自定义包裹组件<close-overlay>、<disables-submit-on-errors>都添加inline-flex类，避免组件默认块级属性打乱flex横向排布
• 第三步：如果插槽父级本身为flex布局，可额外给按钮容器添加flex-grow类，强制容器占满父级剩余分配空间

调整后可正常运行的参考代码：

<template slot="modal_actions">
    <div class="w-full flex items-center justify-end gap-3">
        <close-overlay class="h-full inline-flex" identifier="addNewScheduleModal">
            <cs-button variant="blank">Cancel</cs-button>
        </close-overlay>
        <disables-submit-on-errors
            class="inline-flex"
            :identifier="identifier"
            @proceed="addNewSchedule"
        >
        <loading-button ref="submitBtnSave" size="normal">
            Save & Close
        </loading-button>
        </disables-submit-on-errors>
    </div>
</template>

排查提示：打开浏览器开发者工具选中按钮容器div，查看盒模型的实际宽度，如果宽度和内部两个按钮的总宽度一致，即可确认是容器未撑满父级导致的justify-end不生效。

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