厨房订单展示动态盒子高度自适应问题求助

你当前的订单盒子会统一继承首个订单的高度，导致内容少的盒子也保持相同高度，可通过以下调整实现盒子根据内容自动适配高度：

问题根源 #

• Flex容器.order-container默认使用align-items: stretch属性，会强制所有子订单盒子拉伸至容器内最高元素的高度，这是所有盒子高度一致的核心原因。
• 你添加的resizeOrderBox函数属于冗余代码，且按钮的onclick参数传递错误（{ order_id }会被解析为对象，而非正确的订单ID值），反而可能干扰高度的正常渲染。

修复步骤 #

1. 调整Flex容器对齐规则 #

修改.order-container的CSS样式，添加align-items: flex-start取消高度拉伸行为：

.order-container {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* 关键修改，让盒子按自身内容高度渲染 */
}

2. 移除冗余JS代码 #

删除页面底部的<script>标签及其中的resizeOrderBox函数，同时移除"Add Item"按钮上的onclick属性：
修改后的添加按钮代码：

<form action="/add_item" method="post">
    <input type="hidden" name="order_id" value="{{ order_id }}">
    <input type="text" name="item" placeholder="Add item">
    <button type="submit">Add Item</button>
</form>

完整修改后的核心代码片段 #

头部样式：

<style>
    body {
        background-color: white;
        padding-left: 340px;
    }
    .order-container {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .order-box {
        border: 2px solid #000;
        border-radius: 20px;
        padding: 10px;
        margin: 10px;
        width: 200px;
    }
    h2 {
        text-align: center;
    }
</style>

完成以上修改后，每个订单盒子会根据内部的菜品条目数量、表单内容自动调整高度，符合标准厨房展示系统的需求。

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