带flex的css pos系统布局

我确实想开发一个基于此图像的POS系统布局

整个布局应适合显示高度

项目列表的溢出应该是可滚动的

右侧的两个框应占据显示高度的50%，第一个框应具有滚动功能

这就是我到目前为止所做的。如何使用CSS实现这一点

正文{
最小高度：100vh；
背景色：暗灰色；
保证金：0
}
.集装箱{
显示器：flex；
背景颜色：绿色；
身高：'100%'；
}
.项目清单{
背景颜色：白肋木；
弹性：3
}
.订单详情{
背景颜色：珊瑚；
弹性：1；
}
.显示总数{
背景颜色：蓝紫色
}
.项目{
背景色：白色；
填充：1rem；
边框：1px纯黑；
左边距：1 em；
右边距：1rem；
}

文件
第1项
第2项

第3项

第4项

第5项

第6项

第7项

第1项
全部的

你喜欢这个吗？我添加了

overflow-y:scroll用于可滚动的，

我加了
身高：50%到
。显示总计
和
购物车项目
，这样两个箱子将占50%的高度

而且它有效


正文{
最小高度：100vh；
背景色：暗灰色；
保证金：0
}
.集装箱{
显示器：flex；
背景颜色：绿色；
身高：100%；
}
.项目清单{
背景颜色：白肋木；
弹性：3；
overflow-y:scroll；/*我添加了这个*/
}
.订单详情{
背景颜色：珊瑚；
弹性：1；
}
.显示总数{
背景色：蓝紫色；
身高：50%；/*我加了这个*/
}
.项目{
背景色：白色；
填充：1rem；
边框：1px纯黑；
左边距：1 em；
右边距：1rem；
}
.购物车项目{
overflow-y:scroll；/*我添加了这个*/
身高：50%；/*我加了这个*/
}

文件
第1项
第2项

第3项

第4项

第5项

第6项

第7项

第1项
全部的
关键是为可滚动div分配
overflow-y:scroll
，然后确保其高度受到限制，以便强制滚动

下面是一个示例片段：


正文{
高度：100vh；
背景色：暗灰色；
保证金：0
}
.集装箱{
显示器：flex；
背景颜色：绿色；
身高：100%；
}
.项目清单{
背景颜色：白肋木；
弹性基准：50%；
溢出y：滚动；
}
.订单详情{
显示器：flex；
弯曲方向：立柱；
背景颜色：珊瑚；
弹性基准：50%；
}
.购物车项目{
弹性基准：50%；
溢出y：滚动；
}
.显示总数{
背景色：蓝紫色；
弹性基准：50%；
}
.项目{
背景色：白色；
填充：1rem；
边框：1px纯黑；
左边距：1 em；
右边距：1rem；
}

文件
第1项
第2项

第3项

第4项

第5项

第6项

第7项

第1项
第2项

第3项

第4项

全部的
“Anyhelp”不是一个单词，也不是一个句子。