'How to create a fixed-height, multi-row, arbitrarily large horizontally scrolling container with css?

I'm trying to construct a container that has a list of divs that each take up a variable amount of space (based on the amount of text in the div) that flows horizontally.

Specifically, I have a container like this: container It's a series of divs that are each a different size width. I would like this to have roughly 3 rows, and to flow horizontally given an arbitrary amount of divs. Right now it overflows vertically, and I cannot figure out how to disable that. If I add another row, I'd like the divs to adjust so that the appropriate number divs are moved to the new row.

I tried doing this with grids and flex-box. Neither of these seem like a great fit -- grid obviously works best with fixed size cells, while flex-box seems to work best with fixed size space to work in. Neither of those constraints fully hold here.

I think the way to do this is with flex-direction: column, so that data is 'filled in' left to right, and then use flex-wrap: wrap to actually get the wrap around effect. But I can't figure out how to make each column a different width based on the individual element -- it's rather easy to get different heights, but not different widths. Similarly, if I use flex-direction: row and flex-wrap: wrap, I can get different widths, but then everything scrolls vertically.

htmlcssflexboxcss-grid


Solution 1:[1]

i have make it with flex-wrap. Sp, if you have any additional, you can comment bellow and i will editted as i can.

const app = new Vue({
  el: '#app',
  data() {
    return {
      list:['202s','A.Smyth','Accu','Adam Clayton','Adrian Crowley','After Dark','Agnes Obel ','Aidan Gillan','Aidan Gillen & John Grant.jpg','Aidan Gillen','Aiben Reddy','Aine Cahil','Air Traffic','Aia ni','Albama 3','Alexx Gough','All Twins ','All We Are','Amano','Ambience Affair','Amy Winehouse','And So I Watch You From A Far','Ane Brun','Angie Mc Mahon ','Ani Glass','Anna Calvi','Anna Meke ','Anna Mulliary','Annie Mac','James Vincent McMorrow','Antiers']
    }
  }
})
*{
  background-color:#9da1a6;
  box-sizing:border-box;
}
.container{
  width:100%;
  height:2rem;
}
ul{
  display:flex;
  flex-wrap:wrap;
  list-style-type: none;
}
.list_wrapper{
  background-color:#434445;
  margin-right:1rem;
  color:#ffffff;
  padding:0.5rem;
  border-radius:5px;
  margin-bottom:0.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>

<body>
  <div id="app">
  <div class="container">
    <ul>
      <li v-for="(item, index) in list" :key="index">
      <div class="list_wrapper">
      {{item}}
      </div>
      </li>
    </ul>
    </div>
  </div>
</body>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Dimas Wahyu Notonagoro

Related Questions