css - 带有 div 子项的 Flex 容器不水平堆叠

Question

我是 flexbox 的新手，不知道如何做我正在尝试的事情。我希望重复的内容向右水平堆叠。我希望元素缩小以适应内容的宽度(如果标题/报告 ID 文本更长/更短)。我正在尝试使红色框仅与内容一样宽，并向右堆叠。紫色盒子(容器)是柔性的。似乎红色的 div 是我无法弄清楚的罪魁祸首。我试过转换为内联 block 并使用 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

I'd like for the repeated content to stack horizontally to the right

使用默认的 flex-direction: row。

I would like the items to shrink to fit the width of the content

使用默认的 flex-grow: 0 和 flex-basis: content。