我有一個包含多個項目的容器，我試圖實現一個每行顯示兩個項目的布局。此外，我希望每個項目的div適合其內容，沒有任何額外的空間。下面是我的HTML的結構:

https://jsfiddle.net/x8jqnv7o/61/

<div class="container">
  <div class="item">
    ITEM 1
  </div>
  <div class="item">
    ITEM 2
  </div>
  <div class="item">
    ITEM 333333333333333333
  </div>
  <div class="item">
    ITEM 4
  </div>
  <div class="item">
    ITEM 5
  </div>
</div>

這是我正在使用的CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  border: 1px solid black;
  width: 50%;
  box-sizing: border-box;
}

使用上面的CSS，我可以每行顯示兩個項目，但是div的寬度固定為50%。相反，我希望每個項目的div調整其寬度，以適應其內容。

期望結果

我如何修改我的CSS來實現這一點？任何幫助或建議將不勝感激。謝謝大家！

PS:我的容器中的條目列表是動態的，是基于字符串列表生成的。項目的數量可以變化，每個項目的內容將由列表中相應的字符串確定。

# # #使用flexbox時，建議在寬度上使用flex-grow flex-shrink和flex-basis屬性:

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 50%;
  // flex: 0 0 50%; This is equivalent to above 3 lines
}