Css 如何使用flexbox在网格中包含内容？

我想使用flexbox来包含网格第二个div中的所有内容。在这种情况下，图片溢出，我不知道为什么。我想它被高度调整大小，并保持纵横比

正文{
身高：100%；
保证金：0；
}
.包装纸{
显示：网格；
网格模板：重复（2，50vh）/重复（3，1fr）；
背景色：#A9A9；
}
.wrapper>div:n个子项（偶数）{
背景色：#D3；
}
.pic2{
显示器：flex；
弯曲方向：立柱；
}
钮扣{
弹性：1；
最小高度：40px；
背景：绿色；
}
img{
弹性：1；
最大高度：100%；
}

第二组
第二组
第三组
第四组
第五组
第六组

当CSS应用

img

max height:100%时，您设置了按钮

min height:40px

，实际上是获取父级大小，而不是减少按钮40px

您可以设置

最大高度：计算（100%-40px），将应用该按钮的父级100%高度减去40px


正文{
身高：100%；
保证金：0；
}
.包装纸{
显示：网格；
网格模板：重复（2，50vh）/重复（3，1fr）；
背景色：#A9A9；
}
.wrapper>div:n个子项（偶数）{
背景色：#D3；
}
.pic2{
显示器：flex；
弯曲方向：立柱；
}
钮扣{
弹性：1；
最小高度：40px；
背景：绿色；
}
img{
弹性：1；
最大高度：计算（100%-40px）；
}

第二组
第二组
第三组
第四组
第五组
第六组
您不能设置按钮的最小高度，因为您必须使用div。
除非在调整图片大小时会导致奇怪的溢出问题。我试着调整窗口的大小，看看这是否是你想要的效果


正文{
身高：100%；
保证金：0；
}
.包装纸{
显示：网格；
网格模板：重复（2，50vh）/重复（3，1fr）；
背景色：#A9A9；
}
.包装部{
宽度：100%；
身高：100%；
}
.wrapper>div:n个子项（偶数）{
背景色：#D3；
}
.pic2{
显示器：flex；
弯曲方向：立柱；
}
钮扣{
弹性：1；
身高：30%；
背景：绿色；
}
img{
弹性：1；
最大高度：100%；
}
.定制img{
显示：块；
最大高度：70%；
}

第二组
第二组
第三组
第四组
第五组
第六组
为什么不改用。。。使用div使你不得不硬编码许多css属性来实现你想要的。