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

Question

我是 flexbox 的新手，不知道如何做我正在尝试的事情。我希望重复的内容向右水平堆叠。我希望项目缩小以适应内容的宽度（如果 title/report id 文本是 longer/shorter）。我正在尝试使红色框仅与内容一样宽，并向右堆叠。紫色盒子（容器）是柔性的。好像红色的 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

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。

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

Flex container with divs children not stacking horizontally

css

flexbox

horizontallist