Css 当flex项目大于flex容器时，我是否可以将flexbox项目缩小到相同的大小？

我希望当flex项目的总大小小于flex容器时，flex项目应该占据各自的空间；当flex项目的总大小大于flex容器时，flex项目应该平均分配容器的空间

因此，我将flex grow设置为0，将flex shrink设置为1。为了使flex项收缩到小于其最小内容，我将最小高度设置为0。 但无论我如何设置flex items的flex basis属性，我都无法获得所需的样式

当flex项目的总大小小于flex容器的总大小时，应使用的右侧部分的示例1。当flex项目的总大小大于flex容器的总大小时，应使用示例2的左侧部分

.flex容器{
字体大小：12px；
显示器：flex；
弯曲方向：立柱；
宽度：200px；
高度：180像素；
边框：1px实心#dadfe3；
对正内容：空间均匀；
}
.弹性项目{
flex:01自动；
最小高度：0；
溢出：自动；
利润率：0.20px；
最大高度：50%；
}
.弹性物品组{
保证金：4px0；
背景色：#f0f9ff；
颜色：#2f88ff；
}

例1
项目内容1
项目内容2
项目内容2
项目内容4
例2
项目内容1
项目内容2
项目内容3
项目内容4
项目内容5
项目内容6
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15

如果我理解正确，那么你想要这个。如果没有，请在评论部分再解释一下

.flex容器{
字体大小：12px；
显示器：flex；
弯曲方向：立柱；
宽度：200px；
高度：180像素；
边框：1px实心#dadfe3；
证明内容：之间的空间；
}
/*.flex项目：第一个孩子{
最小高度：50%；
}*/
.弹性项目{
flex:01自动；
溢出：自动；
利润率：0.20px；
最小高度：0；
}
.弹性物品组{
保证金：4px0；
背景色：#f0f9ff；
颜色：#2f88ff；
}

例1
项目内容1
项目内容2
例2
项目1
项目2
项目2
项目2
项目2
项目2
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
例3
项目1
项目2
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
项目内容1
例4
项目1
项目2
项目2
项目2
项目2
项目2
项目2

我会使用

display:grid

而不是

display:flex

来实现这一点。以下是一个例子：

.flex容器{
字体大小：12px；
显示：网格；
网格模板列：1fr；
网格模板行：重复（2，最小值（最小值（0，自动），50%）；
宽度：200px；
高度：500px；
边框：1px实心#dadfe3；
}
.弹性项目{
最小高度：0；
溢出：自动；
利润率：0.20px；
}
.弹性物品组{
保证金：4px0；
背景色：#f0f9ff；
颜色：#2f88ff；
}

项目内容1
项目内容2
项目内容3
项目内容4
项目内容5
项目内容6
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
项目9
项目10
项目11
项目12
项目13
项目14
项目15

所需的样式是什么？你想在这里实现什么？我添加了一张图片来回答这个问题。示例2很好，最大高度：50%很聪明。但例如1，请看我更新的问题。当flex项目的总高度小于容器的高度时，我希望它们在没有滚动条的情况下完全显示，而最大高度：50%不是很好。您能否共享屏幕截图或img以便我能够正确理解这里有两个flex项目，您的意思是，如果flex项目的高度小于外部容器的高度，那么它将显示在完整容器中。如果是的话，那么第二个flex项目会去哪里？我贴了一个问题的图片链接。嘿，我想已经完成了。请看一看，让我知道我不熟悉网格布局。但它似乎完美的网格布局。我尝试将容器的高度从200px设置为700px以查看结果。最好把所有的空白移到底部，而不是把它们分成两个部分。好的，很容易的解决办法。谢谢，我很高兴能帮助你：