带有div的儿童不能水平堆叠的Flex容器

Question

我对flexbox相当新，并且无法弄清楚如何做我正在尝试的事情。我希望重复的内容水平向右堆叠。我希望缩小项目以适应内容的宽度（如果标题/报告ID文本更长/更短）。我试图让红色框的内容与内容一样宽，并且向右叠加。紫色盒子（容器）是弯曲的。似乎红色的div是我无法弄清楚的罪魁祸首。我尝试过转换为内联块并使用flex-grow和flex-shrink进行游戏，但似乎没有什么对我有用。在项目的其他地方可能存在竞争的风格，但如果情况不确定则不确定要查找的内容......

紫色容器div的样式：

line-height: 1.5;
display: flex;
flex-direction: column;
max-height: 22.8125rem;
padding-bottom: .5rem;
margin-bottom: 1rem;
background-color: #394b54;
flex-basis: 100%;
-webkit-box-flex: 1;
flex-grow: 1;

Answer 1

  

我希望重复的内容水平叠加到右边

使用默认.then()。

  

我希望缩小项目以适应内容的宽度

使用默认flex-direction: row和flex-grow: 0。