允许组件溢出到下一行

Question

我正在尝试获取一个组件的映射，以转到下一行(参见黄色箭头)。然而，现在，它不是向下移动，而是挤压组件(卡片)。我做了bg-颜色来帮助帮助。任何指导都是很棒的！

​

​

<div className="border-2 h-screen bg-pink-300 ">
            <div className="flex justify-end px-10 ">
                <button className="border-2 border-secondary p-2 rounded-lg hover:border-opacity-20">Add Item +</button>
            </div>
           
            <div className="flex overflow-x-auto bg-green-500 ">
            {data.map((data) => (
                <MenuCard title={data.title} ingredients={data. ingredients} 
                category={data.category} onSpecial={data.onSpecial} />
            ))}
            </div>
            
            </div>

Answer 1

将flex-wrap类添加到MenuCard的父div元素中。还删除overflow-x-auto类，因为这将使容器垂直滚动。

应该是这样的。

<div className="flex flex-wrap bg-green-500 ">
  {data.map((data) => (
    <MenuCard title={data.title} ingredients={data. ingredients} 
    category={data.category} onSpecial={data.onSpecial} />
  ))}
</div>

如果flex-shrink-0类试图收缩，则可能还需要在每个MenuCard实例中添加它。