Css Flexbox容器收缩低于最小高度：最大内容

我正在处理flexbox侧栏菜单，但似乎在

flex:0 1 auto

容器与

min height

的固有大小之间发生冲突，导致容器收缩到允许的最小值以下

（与下面的代码片段相同）

摘要/预期行为

• 菜单横跨整个垂直屏幕空间，由任意数量的

  可最小化组

  容器组成，这些容器整齐地堆叠在彼此的顶部
• 每个组都有一个

  flex:none

  标题/标题和一个灵活的容器

  可最小化组内容

• 有两种组内容类型：

  • .unshrinkable

    用于用户应完全可见的重要控件元素（代码段中的红色框）

  • .shrinkable

    用于潜在的巨大列表，允许将列表缩小到某个最小高度（代码段中的蓝色框）
• 用户可以折叠每个可最小化的组(⮟ 按钮）--该部件目前工作正常

问题 在代码段中，您可以看到所有三个可最小化的组（全屏）。但是，第2组中不可饮用的内容会被压缩在一起，除非我折叠第1组或第3组

从开发人员控制台上看，问题似乎出在

可最小化的组内容中。内部红色的
.unshrinkable
框显示了一个合理的计算高度（18像素），但封套容器的计算高度仅为~5px，并且无论我向它抛出什么CSS，它都拒绝调整大小

我是否可以设置任何其他属性来防止我的弹性盒收缩超过最小高度？或者我可以用不同的方法获得预期的行为吗

（非）相关：

--也使用了它，但涵盖了完全相反的内容：元素不收缩
--会匹配的，但似乎有一个已经修好了
——对内在维度的解释——我认为我使用的是正确的
--已尝试调整内容/最小内容/最大内容，但似乎没有任何效果

一小条

Array.from（document.getElementsByClassName（“可最小化组”））.forEach（（元素）=>{
元素。子元素[0]。addEventListener（'click'，（）=>{
元素.children[0].classList.toggle（'minimized'）；
元素.children[1].classList.toggle（'minimized'）；
});
});
*{
最小高度：0px；
}
html，
身体{
位置：绝对位置；
边际：0px；
填充：0px；
溢出：隐藏；
顶部：0px；
左：0px；
高度：100vh；
宽度：300px；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
flex:01自动；
溢出y：自动；
}
.最小群{
显示器：flex；
弯曲方向：立柱；
flex:01自动；
溢出y：隐藏；
}
.可最小化组标题{
flex：无；
}
.可最小化组内容{
显示器：flex；
弯曲方向：立柱；
flex:01自动；
溢出y：自动；
最小高度：最小内容！重要；
}
.不可饮用{
flex：无；
最小高度：最大内容！重要；
}
.可收缩{
flex:01自动；
溢出y：自动；
最小高度：1米；
}
/*********************************/
/*下面不相干的东西*/
.可最小化组标题{
光标：指针；
颜色：#aaa；
背景色：#333；
字体大小：粗体；
}
.可最小化组标题：：之前{
内容:'⮟ ';
}
.minimized组标题。minimized:：before{
内容:'➤ ';
}
.minimized-group-content.minimized{
最大高度：0px；
可见性：隐藏；
}
.不可饮用{
背景色：#ffcccb；
}
.可收缩{
背景色：#添加8e6；
}

第一组
知识是一种美德，是一种美德，是一种美德，是一种美德。
阿梅特·维尼那提斯·乌纳·库苏斯·埃吉特·努克。马来苏达山慈姑。生命托拉斯福西布斯或纳雷暂停。阿利奎姆sem中的Cursus eget nunc scelerisque viverra mauris。这是一个很好的例子。Nisl suscipit Adipsicing bibendum
这是一个整数拍卖器。奥瓦里帕特·梅塞纳斯·奥瓦里帕特·布兰迪特·阿利夸姆·埃拉特。著名的ac turpis egestas integer eget aliquet nibh。埃尼姆·普雷森特设施设备有限公司。孕妇设施不全。马格尼氏病
蒙特斯·纳斯图尔·德里库斯·莫斯·莫里斯·维塔伊（montes nascetur ridiculus mus mauris vitae）。艾米特是埃吉斯塔的一只老鼠。
暂时的，暂时的。孕妇Purus quis blandit turpis cursus在hac habitasse platea。在这篇文章中，我们看到了奥古斯·因特杜姆。位于梅特斯的威尼斯人的直径。purus faucibus或Nare suspendisse sed nisi lacus生命
塞德。维利特·塞德·乌兰科珀·莫尔比·廷西登。这是一个很好的例子。奥古斯·莫里斯·奥古斯·内克在发酵罐中怀孕。孕妇的医疗设备不合格。Sem和tortor consequat
同一时间内的直径。暂时性的或暂时性的或暂时性的。
但是，在最低限度上，我们需要一个实验室来进行日常工作。
第2组
矢状要素
第3组
设备在两天或两天内旋转。杜伊斯ultricies lacus sed turpis tincidunt id。
阿梅特·维尼那提斯·乌纳·库苏斯·埃吉特·努克。马来苏达山慈姑。生命托拉斯福西布斯或纳雷暂停。阿利奎姆sem中的Cursus eget nunc scelerisque viverra mauris。这是一个很好的例子。Nisl suscipit Adipsicing bibendum
这是一个整数拍卖器。奥瓦里帕特·梅塞纳斯·奥瓦里帕特·布兰迪特·阿利夸姆·埃拉特。著名的ac turpis egestas integer eget aliquet nibh。埃尼姆·普雷森特设施设备有限公司。孕妇设施不全。马格尼氏病
黑背山