Html 仅当空间限制需要时才进行调整，并且不要'；不要分配不需要的空间

以下是我试图实现的目标：

A.只要有空间放置物品，物品就应该占用其原有空间：

但如果我们的空间不够，我们不希望出现溢出：

B.相反，在它们之间分配可用空间：

C.但不要为不需要的单元分配不必要的空间；i、 e.短词应只占用所需空间，腾出空间分配给长词：

理想情况下，我希望同时满足A&C，但我至少需要满足A&B。做A或C并不难，但我不知道如何用相同的标记同时做这两件事

下面是我用来生成这些图像的片段。请注意，我通过硬编码特定于单词的最大大小来实现“C”，因为我不知道如何在CSS中为任意单词实现这种行为

div{
边框：2件纯蓝；
填充：.1rem；
保证金：.1rem；
}
.家长{
显示器：flex；
宽度：600px；
边缘底部：1rem；
}
.孩子{
}
.test-2>.child{
flex:100px；
文本溢出：省略号；
溢出：隐藏；
}

只要有足够的空间，物品就应占据其固有空间：
苹果
反情报
橙色
反疾病
橘
但如果我们的空间不够，我们不希望出现溢出：
苹果
反情报
橙色
反疾病
橘
鸭子
适得其反
测试
过度换气


而是在它们之间分配可用空间：
苹果
反情报
橙色
反疾病
橘
鸭子
适得其反
测试
过度换气


但不要给不需要的细胞分配不必要的空间；i、 e.短词应只占用所需空间，腾出空间分配给长词：
苹果
反情报
橙色
反疾病
橘
鸭子
适得其反
测试
过度换气

您可以使用父div中的内联网格来完成此操作，该网格包含子div，并将

网格自动流动设置为
列


div{
边框：2件纯蓝；
填充：.1rem；
保证金：.1rem；
}
.家长{
宽度：600px；
边缘底部：1rem；
}
.中级{
显示：内联网格；
网格自动流：列；
最大宽度：100%；
边界：无；
填充：0；
保证金：0；
}
.孩子{
文本溢出：省略号；
溢出：隐藏；
}

苹果
反情报
橙色
反疾病
橘
苹果
反情报
橙色
反疾病
橘
鸭子
适得其反
测试
过度换气
很确定这在flexbox中是不可能的……flex属性不是这样工作的。F'ing brilliant。显然，我需要学习CSS网格（我的主要项目目前不允许使用CSS网格，所以我没有费心）。