I'm attempting to display a simple list of tags of different lengths that would span over 3 lines before overflowing horizontally while being scrollable using React.
The tags contain text, a border, and not much else:
Here's a magnificent drawing to illustrate what I'm trying to render with different amounts of tags:
Here's the code I'm currently using, which has the tags overflowing in the wrong direction, vertically:
:root {
--scpu-bg: #1b1b1b;
--scpu-border: #3d3d3d;
--scpu-fg: #ffffff;
color: var(--scpu-fg);
font-size: 14px;
}
body {
background-color: var(--scpu-bg);
}
.tag-chip {
padding: 1rem;
border: 1px var(--scpu-border) solid;
}
.tag-cloud {
overflow-x: scroll;
}
.tag-list {
/*display: grid;
grid: 1fr 1fr 1fr / ;*/
max-height: 11rem;
display: flex;
gap: 0.7rem;
flex-wrap: wrap;
}<div class="tag-cloud">
<div class="tag-list nav-scroll">
<span class="tag-chip">6000</span><span class="tag-chip">alagadda</span
><span class="tag-chip">artifact</span><span class="tag-chip">audio</span
><span class="tag-chip">biological</span
><span class="tag-chip">blackwood</span><span class="tag-chip">_cc</span
><span class="tag-chip">co-authored</span
><span class="tag-chip">container</span><span class="tag-chip">d-11424</span
><span class="tag-chip">daevite</span
><span class="tag-chip">deer-college</span
><span class="tag-chip">doctor-light</span
><span class="tag-chip">doctor-mcdoctorate</span
><span class="tag-chip">entropic</span
><span class="tag-chip">esoteric-class</span
><span class="tag-chip">ethics-committee</span
><span class="tag-chip">faeowynn-wilson</span
><span class="tag-chip">global-occult-coalition</span
><span class="tag-chip">grand-karcist-ion</span
><span class="tag-chip">hanged-king</span
><span class="tag-chip">hy-brasil</span
><span class="tag-chip">interactive</span
><span class="tag-chip">la-rue-macabre</span
><span class="tag-chip">_licensebox</span><span class="tag-chip">meta</span
><span class="tag-chip">metallic</span
><span class="tag-chip">narrative</span
><span class="tag-chip">on-guard-43</span
><span class="tag-chip">portal</span><span class="tag-chip">religious</span
><span class="tag-chip">ritual</span
><span class="tag-chip">s&amp;c-plastics</span
><span class="tag-chip">scp</span><span class="tag-chip">serpents-hand</span
><span class="tag-chip">spacetime</span
><span class="tag-chip">temporal</span
><span class="tag-chip">three-moons-initiative</span
><span class="tag-chip">three-portlands</span
><span class="tag-chip">wanderers-library</span
><span class="tag-chip">weapon</span
><span class="tag-chip">wilsons-wildlife</span>
</div>
</div>I'm currently using display: flex coupled with flex-wrap: wrap to get as close as possible to what i'm trying to do.
Put it simply, I want the tags to be put on 3 lines max, no matter of much width it would take while having tags keep their own width.
Unfortunately, I only know the height the component is supposed to have, and the wrapping effect isn't meant to work with overflow AFAIK.
If you already know the height of your component, but not the width, why not use
flex-direction: column?
Because then every element is given the same width, making an awkward combination:
If you have a set amount of rows, why aren't you using
display: grid?
Wouldn't columns suffer from the same problem as above ?
Is there any solution other than splitting my array of tags into 3 sections and rendering them independently ?