允许组件溢出到下一行答案

【问题标题】：Allow Component to Overflow to next line允许组件溢出到下一行
【发布时间】：2022-01-10 00:12:31
【问题描述】：

我正在尝试获取组件的地图以转到下一行（请参见黄色箭头）。然而，现在不是去下面，而是挤压组件（卡片）。我制作了 bg-colors 来提供帮助。任何指导都会很棒！


<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>

【问题讨论】：

标签： css reactjs next.js tailwind-css

【解决方案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>

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

【讨论】：