在一個站點中，我們有一個下拉菜單，其中包含一個具有固定寬度和高度的div。這些項目以flex-direction:列和flex wrap堆疊在一起。然而，當添加項目時，我們分別在右側添加溢出的內容。

Current css in a nutshell
.flex-container {
display: flex;
height: 400px;
width: (now set to a fixed width, but aim is dynamic)
flex-wrap: wrap;
flex-direction: column;
}`
flex-item { 
width: 100px;
}

所以我們想要動態的容器寬度，最好沒有任何JS。

這導致:

有人知道如何完成這個任務嗎？

我也嘗試了一些內聯塊/浮點解決方案，但是flex目前給出的是& quot最優選的& quot解決方案，但沒有動態寬度

這個片段能滿足您的需求嗎？

document.querySelectorAll('.d>div').forEach(d => {
  d.style.height = (Math.floor(Math.random() * 60) + 40) + 'px';
})

.d {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 400px;
  gap: 1em;
  margin-bottom: 1em;
}
.d>div { 
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.d1 {
  align-content: start;
}
.d2 {
  align-content: end;
}
.d1>div {
  background: pink;
}
.d2>div {
  background: cyan;
}

<div class="d d1">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
  <div>q</div>
  <div>r</div>
  <div>s</div>
  <div>t</div>
  <div>u</div>
  <div>v</div>
  <div>w</div>
  <div>x</div>
  <div>y</div>
  <div>z</div>
</div>

<div class="d d2">
  <div>a</div>
  <div>b</div>
  <div>c</div>
  <div>d</div>
  <div>e</div>
  <div>f</div>
  <div>g</div>
  <div>h</div>
  <div>i</div>
  <div>j</div>
  <div>k</div>
  <div>l</div>
  <div>m</div>
  <div>n</div>
  <div>o</div>
  <div>p</div>
  <div>q</div>
  <div>r</div>
  <div>s</div>
  <div>t</div>
  <div>u</div>
  <div>v</div>
  <div>w</div>
  <div>x</div>
  <div>y</div>
  <div>z</div>
</div>