Html 带有跳转单元格内容的CSS表

我正在尝试创建一个简单的React应用程序来显示表中的内容。当要显示的内容很短时，一切都很好，如下图所示

但如果内容很大，我想将其移动到下一个单元格，如下图所示

我可以通过CSS实现它吗？或者你现在有没有解决这个问题的办法？我不想要任何

溢出

下面是我的示例代码：
正如您可以看到的，内容重叠在一起。
代码（jsfiddle）中的问题是您已经将高度设置为class
。销售项目
，您需要它溢出，删除该类，它将很好，如下面的工作片段所示


正文{
保证金：0；
}
.集装箱{
背景色：#000；
宽度：自动；
填充物：5px；
}
.出售物品容器{
显示：内联块；
列宽：calc（100vw/4）；
高度：99vh；
}
.出售物品{
/*高度：计算（99vh/2）；*/*已删除*/
}

常数数据=[{
id:0，
页眉：25，
项目：[{
名称：“芬达0.2升”，
计数：1，
分项：[{
名称：“+lód”
}]
}, {
名称：“可口可乐0.2升”，
计数：1，
分项：[{
名称：“BEZ LODU”
}]
}]
}, {
id:0，
页眉：26，
项目：[{
名称：“芬达0.2升”，
计数：1，
分项：[]
}, {
名称：“可口可乐0.2升”，
计数：1，
分项：[{
名称：“BEZ LODU”
}]
}]
}, {
id:0，
页眉：27，
项目：[{
名称：“芬达0.2升”，
计数：1，
分项：[{
名称：“+lód”
}]
}, {
名称：“可口可乐0.2升”，
计数：1，
分项：[]
}]
}, {
id:0，
页眉：40，
项目：[{
名称：“SAŁATKA DUŻA”，
计数：1
}, {
名称：“SAŁATKA DUŻA”，
计数：1，
分项：[{
名称：“z kurczakiem”
}, {
名称：“sos duży”
}]
}, {
名称：“ŚREDNIA:PIZZA”，
计数：0.5，
分项：[{
名称：“标准”
}, {
名称：“sos烧烤”
}, {
姓名：“塞布拉”
}, {
名称：“ser”
}, {
名字：“辣椒”
}, {
姓名：“chipsy”
}, {
名称：“oliwki”
}]
}, {
名称：“ŚREDNIA:PIZZA”，
计数：0.5，
分项：[{
姓名：“ciasto”
}, {
名称：“sos烧烤”
}, {
姓名：“博泽克”
}, {
名称：“帕尔梅赞”
}, {
名称：“ser”
}, {
名称：“feta”
}, {
姓名：“塞布拉”
}, {
名称：“sosśmietanowy”
}]
}]
}, {
id:0，
页眉：38，
项目：[{
名称：“芬达0.2升”，
计数：1，
分项：[{
名称：“+lód”
}]
}, {
名称：“可口可乐0.2升”，
计数：1，
分项：[{
名称：“BEZ LODU”
}]
}]
}];
常量子项=（{data}）=>{
返回React.createElement(
“李”，
{className:“列表组项”，样式：{paddingLeft:'25px'}，
React.createElement(
“div”，
无效的
React.createElement(
“跨度”，
{style:{paddingLeft:'5px'}}，
data.name
)
)
);
};
常量面板=（{data}）=>{
返回React.createElement(
“div”，
{className:“销售项目”}，
React.createElement(
“div”，
{className:“面板默认值”}，
React.createElement(
“div”，
{className:“面板标题”}，
React.createElement(
“div”，
{className:“面板标题”}，
data.header
)
),
React.createElement(
“div”，
{className:“面板主体”}，
React.createElement(
“ul”，
{className:“列表组”}，
data.items.map（（数据，键）=>React.createElement(
反应，碎片，
{key:key}，
React.createElement(
“李”，
{className:“列表组项”}，
React.createElement(
“b”，
无效的
data.count，
" ",
data.name
)
),
data.subItems&&data.subItems.map（（子项，索引）=>React.createElement（子项，{key:index，data:subItem}））
))
)
)
)
);
};
让App=类App扩展React.Component{
render（）{
返回React.createElement(
“div”，
{className:“容器”}，
React.createElement(
“div”，
{className:“销售项目容器”}，
data.map（（值、索引）=>{
返回React.createElement（面板，{data:value，key:index}）；
})
)
);
}
};
render（React.createElement（App，null），document.getElementById（'root'）；
我建议只使用CSS列，而不是用作分隔符的水平线。你需要吗？我不需要任何分离器。如您所见，我目前正在使用列。但我不知道如何让新内容从一个特定的位置开始，就像它将在一个新的单元格中一样。但正如您在提供的图片中看到的，我希望有两行，让新内容从一个特定的位置开始，就像它将在一个新的单元格中一样。我不认为，这是可能的，只有css，它可能需要大量的js来完成