Javascript CSS网格。我的当前布局在chrome上按预期工作，但在firefox上没有

：根目录{
--文字颜色：#fff；
}
* {
填充：0；
保证金：0；
边界：0；
框大小：边框框；
}
身体{
利润率：10px；
背景：ddd；
字体系列：“非衬线”，衬线；
}
.集装箱{
保证金：0自动；
宽度：100%；
身高：100%；
背景：一枝黄花；
显示：网格；
网格模板柱：3fr 1fr；
栅隙：10px；
}
.rightcontainer{
背景：蓝色；
填充：25px；
}
.rightcontainer.links{
边缘底部：10px；
字体大小：1.2米；
}
.链接a{
文字装饰：无；
颜色：var（--文本颜色）；
}
.leftcontainer{
背景：绿色；
显示：网格；
网格模板行：1fr 1fr；
栅隙：10px；
}
.leftcontainer\u专题文章{
背景：黄色；
显示：网格；
网格模板柱：1fr 1fr；
栅隙：10px；
}
.leftcontainer\uuuu feature-Article 1{
背景：#000；
颜色：#fff；
}   
.leftcontainer_uuuFeature-Article 2{
背景:#555；
颜色：#fff；
} 
.leftcontainer\uuu最新文章{
显示：网格；
网格模板柱：1fr 1fr；
栅隙：10px；
}
.leftcontainer\uuu最新文章>div{
填充物：5px；
背景：#ccc；
显示：网格；
网格模板柱：150px 1fr；
}
.leftcontainer\uuu最新文章>div img{
宽度：100%；
身高：100%；
对象匹配：覆盖；
}
.最近的内容持有者{
填充：10px；
}
.最近时间{
显示：内联块；
字体：斜体；
边缘底部：5px；
}
.leftcontainer\uuu feature-articles>div{
显示：网格；
网格模板列：1fr；
网格模板行：1fr；
}
.leftcontainer\u feature-Article 1 img，
.leftcontainer\u feature-Article 2 img{
宽度：100%；
对象匹配：覆盖；
身高：100%；
网格柱：1/-1；
网格行：1/-1；
}
.leftcontainer\uuuu feature-article1 div，
.leftcontainer\uuuu feature-article2 div{
宽度：100%；
身高：100%；
网格柱：1/-1；
网格行：1/-1；
}

新木
标题1
星期二30:23:58
洛雷姆·伊普苏姆·多洛尔（Lorem ipsum Door sit amet Concertetur Adipising Elite）。必须进行测量和劳动
不！

标题1
星期二30:23:58
洛雷姆·伊普苏姆·多洛尔（Lorem ipsum Door sit amet Concertetur Adipising Elite）。必须进行测量和劳动
不！

标题1
星期二30:23:58
Lorem ipsum Door sit amet Concertetur Adipising Elite。必须进行测量和劳动
不！

标题2
星期二30:23:58
Lorem ipsum Door sit amet Concertetur Adipising Elite。必须进行测量和劳动
不！

标题3
星期二30:23:58
Lorem ipsum Door sit amet Concertetur Adipising Elite。必须进行测量和劳动
不！

标题4
星期二30:23:58
Lorem ipsum Door sit amet Concertetur Adipising Elite。必须进行测量和劳动
不！

我通过将装有img标签的集装箱的

最大宽度

和

最大高度

分别添加到100%，将

最小宽度

和

最小高度

分别添加到0和

最大高度

和

宽度

分别添加到100%和100%来实现