0

I'm trying to achieve an "auto-growing" width of a container of two rows of some items (or one if there is only one item) with flex box, direction column, wrap and width: max-content. But I cannot make it work. It this some shortcoming of css that needs to be delt with in js world, or am I just missing something.

.flex-container {
  list-style: none;
  background: lightgray;
  display: flex;
  flex-direction: column;
  max-height: 240px;
  align-content: flex-start;
  width: max-content;
  flex-wrap: wrap;
}

.flex-container div {
  background: tomato;
  width: 100px;
  height: 100px;
  margin: 10px;
  line-height: 100px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}
<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
</div>
thetarnav
  • 788
  • 2
  • 8
  • Is it possible to display the desired output, what exactly you mean by auto-growing? – Deepak Mukka Feb 20 '22 at 16:35
  • The number of items would be unknown, and the container is supposed to have the width of it's content. Not too short, like it is now (wraps only the first column) and not too long (when you delete `width: max-content` it takes all the available window size). – thetarnav Feb 20 '22 at 17:06

0 Answers0