带有 div 子项的 Flex 容器未水平堆叠答案

【问题标题】：Flex container with divs children not stacking horizontally带有 div 子项的 Flex 容器未水平堆叠
【发布时间】：2016-12-09 17:31:48
【问题描述】：

我对 flexbox 还很陌生，不知道该怎么做。我希望重复的内容向右水平堆叠。我希望项目缩小以适应内容的宽度（如果标题/报告 id 文本更长/更短）。我正在尝试使红色框仅与内容一样宽并堆叠在右侧。紫色盒子（容器）是弹性的。似乎红色 div 是我无法弄清楚的罪魁祸首。我尝试转换为 inline-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;

【问题讨论】：

标签： css flexbox horizontallist

【解决方案1】：

我想让重复的内容向右水平堆叠

使用默认的flex-direction: row。

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

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

【讨论】：

有效，谢谢！我在想内容会被堆叠成列，而不是容器本身会弯曲成一行。