柔性容器与divs儿童不能水平堆叠

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

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

使用默认的flex-direction: row。

我想的项目，以缩小以适合内容

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