Wrapping elements of varying length X times before overflowing

I’m attempting to display a simple list of tags of different lengths that would span … Read more Wrapping elements of varying length X times before overflowing

I’m attempting to display a simple list of tags of different lengths that would span over 3 lines before overflowing horizontally using React

The tags contain text, a border, and not much else:

tag flex

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

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:

enter image description here

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 ?

Source: CSS – Stack Overflow

Categories: NewsTags: , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *