Looking for a CSS solution/fiddle for a column stacked div that adjusts the width automatically

Question

In a site we have a dropdown menu that contains a div that has a set width and a set height. The items are stacked with a flex-direction: column and a flex wrap. However when items get added we respectively add up with an overflow of the content on the right side.

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;
}

So we want to have the container width dynamically, preferably without any JS.

This results in:

Anyone got a fiddle on how to accomplish this?

I also tried some inline-block / float solutions, but flex so far gives "most preferable" solution, but without the dynamic width

Does this answer your question? [Why don't flex items shrink past content size?](https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size) — Adam, May 16 '23 at 12:29
Or maybe this one too: https://stackoverflow.com/q/62082799/12571484 — Adam, May 16 '23 at 12:31
No, @Adam, this question is not a duplicate of either of those. — Brett Donald, May 18 '23 at 07:23

Brett Donald · Answer 1 · 2023-05-18T07:17:36.670

Does this snippet do what you need?

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>

Use align-content to specify whether you want the items to attach to the left or the right of the container. To attach left use align-content: start and to attach right use align-content: end.

Looking for a CSS solution/fiddle for a column stacked div that adjusts the width automatically

1 Answers1