Css Flexbox-可滚动容器包含的Flex项中的元素未正确呈现

我试图将我的一个网站转换为flexbox，但遇到了一个问题，涉及flex容器中的垂直滚动。Firefox似乎能正确呈现，但Chrome/Safari却不能

.container{
高度：200px；
边框：实心1px#000；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.项目{
边框：实心1px红色；
填充：20px；
显示器：flex；
证明内容：之间的空间；
}
.项目部{
边框：实心1px绿色；
}

方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2

只需添加

对齐项目：居中即可

更新css部件

.item {
  border: solid 1px red;
  padding: 20px;
  display: flex;
  align-items: center; /*Add this */
  justify-content: space-between;
}


.container{
高度：200px；
边框：实心1px#000；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.项目{
边框：实心1px红色；
填充：20px；
显示器：flex；
对齐项目：居中；/*添加此项*/
证明内容：之间的空间；
}
.项目部{
边框：实心1px绿色；
}

方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
只需添加
对齐项目：居中即可

更新css部件

.item {
  border: solid 1px red;
  padding: 20px;
  display: flex;
  align-items: center; /*Add this */
  justify-content: space-between;
}


.container{
高度：200px；
边框：实心1px#000；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.项目{
边框：实心1px红色；
填充：20px；
显示器：flex；
对齐项目：居中；/*添加此项*/
证明内容：之间的空间；
}
.项目部{
边框：实心1px绿色；
}

方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
若要修复它，请对长方体分区使用垂直对齐。我想这和折叠衬垫有关。我选择了中心对齐，但也选择了柔性起点和柔性终点


.container{
高度：200px；
边框：实心1px#000；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.项目{
边框：实心1px红色；
填充：20px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.项目部{
边框：实心1px绿色；
}

方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
若要修复它，请对长方体分区使用垂直对齐。我想这和折叠衬垫有关。我选择了中心对齐，但也选择了柔性起点和柔性终点


.container{
高度：200px；
边框：实心1px#000；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.项目{
边框：实心1px红色；
填充：20px；
显示器：flex；
证明内容：之间的空间；
对齐项目：居中；
}
.项目部{
边框：实心1px绿色；
}

方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
要获得20px的填充，请添加
弹性收缩：0到
.item
规则，它将按预期工作

它现在不起作用的原因是许多项要放入
200px
high
容器中，因此
项只需首先折叠，因为flex shrink默认值为1，这意味着允许它们收缩，然后，当它们不能再这样做时，它们开始滚动

如果将父级设置得更高或删除某些项，您将看到它的行为是如何正常的


.container{
高度：200px；
边框：实心1px#000；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.项目{
弹性收缩：0；
边框：实心1px红色；
填充：20px；
显示器：flex；
证明内容：之间的空间；
}
.项目分类{
边框：实心1px绿色；
}

方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
要获得20px的填充，请添加
弹性收缩：0到
.item
规则，它将按预期工作

它现在不起作用的原因是许多项要放入
200px
high
容器中，因此
项只需首先折叠，因为flex shrink默认值为1，这意味着允许它们收缩，然后，当它们不能再这样做时，它们开始滚动

如果将父级设置得更高或删除某些项，您将看到它的行为是如何正常的


.container{
高度：200px；
边框：实心1px#000；
显示器：flex；
弯曲方向：立柱；
溢出y：滚动；
}
.项目{
弹性收缩：0；
边框：实心1px红色；
填充：20px；
显示器：flex；
证明内容：之间的空间；
}
.项目部{
边框：实心1px绿色；
}

方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
方框1
方框2
很难理解flex start和flex end是如何工作的，因为它只是将“框元素”放在顶部