Html 当“弯曲方向”为“列”时，divs将采用所有可用宽度。如何预防？

请参阅附加的代码段。 我需要每个项目采取宽度空间，就内容而言。 弹性项需要垂直堆叠，如示例中所示。 如何实现

怎么做

.container{
显示器：flex；
弯曲方向：立柱；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}

你好，世界
你好，世界2

假设它们仍然应该垂直堆叠，使用

display:inline flex

，它们将根据最宽项目的内容大小相等

对于要折叠到各自内容的每一行，请使用，即，

align items:flex start

，注意，这也会使它们在使用

display:flex

时折叠

它们拉伸到相等宽度的原因是

对齐项目

默认为

拉伸

，因此通过使用任何其他值，它们将根据内容调整大小

.container{
显示：内联flex；
弯曲方向：立柱；
调整项目：灵活启动；
}
格林先生{
背景颜色：绿色；
}
瑞德先生{
背景色：红色；
}

你好，世界
你好，世界2

将其更改为

弹性方向：行添加显示：将内联表添加到子元素。这更好，但仍然不是我所需要的。似乎它占用了列中最长的弹性项，并使每个人都有这个长度。@LiranCUpdated@LGSon很好的技巧，很有趣的
align items:flex start
与这个魔法有任何关系。@LiranC补充了一个解释，解释了为什么会修复它