Quantcast
Channel: Active questions tagged flexbox - Stack Overflow
Viewing all articles
Browse latest Browse all 1675

How I can create a list of items that grows horizontally and has horizontal scroll?

$
0
0

This is my code:

.wrap-here { display: flex; gap: 5px; flex-wrap: wrap; width: 250px; overflow: auto;}.item {flex: 0 0 20%;border: 1px solid black;padding: 10px;margin-bottom: 5px;}
<div class="wrap-here"><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div><div class="item">item</div></div>

Instead of what I have, I'd like the flexbox to set a limit to 2 rows of maximum wrap, and it would keep adding items horizontally, like in the following picture: a table grid with 2 rows and a scrollbar for horizontal movement


Viewing all articles
Browse latest Browse all 1675

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>