Html 平均扩展2个div的大小

我正在为html raport制作模板。我无法确定此

的大小。我有两个这样的沙发。然后，我希望大小相等，彼此相邻显示，此div的2个应占据

的所有可用空间。 最终效果应与此类似：

我试过了，但在分辨率更小的屏幕上，第二个规则div转到下一行

.rule{
  height:300px;
  width: 48%;
  background-color: rgb(55,55,55);
  border-radius:10px 10px 10px 10px;
  display: inline-block;
  margin-right: 15px;
  margin-top: 15px;
}

是否有任何CSS属性可以实现这一点

正文{
背景色：rgb（45,45,45）；
}
.集装箱{
宽度：100%；
高度：200px；
}
.左(右)货柜{
高度：1500px；
宽度：500px；
浮动：左；
背景色：rgb（55,55,55）；
边界半径：10px 10px 10px 10px；
边缘顶部：15px；
边缘底部：15px；
右边距：15px；
左边距：15px；
}
.右(右)货柜{
宽度：自动；
溢出：隐藏；
背景色：rgb（255、255、255）；
}
.右\u容器\u绘图{
宽度：自动；
高度：200px；
背景色：rgb（55,55,55）；
溢出：隐藏；
边缘顶部：15px；
左边距：15px；
边界半径：10px 10px 10px 10px；
}
.规则{
高度：300px；
背景色：rgb（55,55,55）；
边界半径：10px 10px 10px 10px；
显示：内联块；
右边距：15px；
边缘顶部：15px；
}
.标签{
背景色：rgb（70,70,70）；
字体：20pt“MS Shell Dlg 2”；
颜色：rgb（255、255、255）；
边界半径：10px 10px 10px 10px；
文本对齐：居中；
边际上限：0px；
边缘底部：0px；
右边距：0px；
左边距：0px；
}

交易
购买规则
销售规则
绘图

只需添加

显示：flex到
右\u容器
类

flex容器扩展项目以填充可用空间，或收缩项目以防止溢出

有关CSS显示属性的更多信息，请参见下面的链接：
只需添加
显示：flex到
右\u容器
类

flex容器扩展项目以填充可用空间，或收缩项目以防止溢出

有关CSS显示属性的更多信息，请参见下面的链接：
你的答案只解决了我一半的问题。仍然有2个
没有平等地扩展到
的所有可用大小。我想达到与屏幕相似的效果。添加
width:100%到您的
规则
类。此属性最大化每个div的宽度以填充其父div（使用
right\u container
类）。您的答案只解决了我问题的一半。仍然有2个
没有平等地扩展到
的所有可用大小。我想达到与屏幕相似的效果。添加
width:100%到您的
规则
类。此属性最大化每个div的宽度以填充其父div（使用
right\u容器
class）。