柔性容器與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。