Tailwind CSS：flex-col父元素下按钮无法底部对齐的问题排查

我尝试将按钮元素对齐到其父元素的底部，相关代码如下：

<form class="flex flex-col w-full" (submit)="updatePhoto(title, description)">
        <div class="w-full block">
            <input type="text" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="Photo's Title" [value]="photo.title" #title>
        </div>
        <div class="my-4 w-full">
            <textarea rows="2" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline resize-none" placeholder="Photo's Description" [value]="photo.description" #description></textarea>
        </div>
        <div class="grid justify-items-end  mt-auto  border ">
            <div>
                <button class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 shadow-lg shadow-red-500/50 dark:shadow-lg dark:shadow-red-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2" (click)="deletePhoto(photo._id)">
                    Delete
                </button>
                <button class="text-white bg-gradient-to-r from-blue-500 via-blue-600 to-blue-700 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800 shadow-lg shadow-blue-500/50 dark:shadow-lg dark:shadow-blue-800/80 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 ">
                    Update
                </button>
            </div>
        </div>
 </form>

我在父元素form上使用了flex flex-col类，在按钮所在的div容器上使用了grid justify-items-end mt-auto类，但按钮并未对齐到父元素底部。我添加了border类查看容器位置，可见按钮容器仍处于靠上位置，请问问题出在哪里？为什么会这样？

问题核心是父容器form没有设置明确高度。

Flex布局中，mt-auto的作用是让元素自动占据容器内的剩余空间，从而将自身推到容器底部，但这个逻辑生效的前提是父容器有固定高度（或父容器的高度不是完全由子元素内容撑开）。如果form的高度完全由内部输入框、文本域和按钮的高度决定，那么就不存在“剩余空间”让mt-auto去填充，按钮自然无法被推到底部。

调整方案：

• 给form添加高度类，比如h-full（需确保form的父级容器也有高度）、min-h-[400px]固定最小高度，或者min-h-screen让容器占满视口高度，具体根据页面整体布局选择。
• 按钮容器的grid布局可以简化为flex justify-end，同样能实现按钮靠右对齐，代码更简洁。

修改后的核心代码示例：

<form class="flex flex-col w-full h-full" (submit)="updatePhoto(title, description)">
    <!-- 输入框、文本域部分保持不变 -->
    <div class="flex justify-end mt-auto border">
        <!-- 按钮部分保持不变 -->
    </div>
</form>

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