Make label tags smaller on screen resize-CodePudding

I have some label tags that I'm displaying on my screen and the problem is that when I resize the screen they literally overflow out of the container. My problem is that I want them to resize when the screen gets smaller. So when the screen gets smaller they would also be small too and remain the way they were on my computer screen but in a smaller version of themselves . It's mostly CSS but I couldn't figure it out ( i'm using Bootstrap 5 for this ) . Here is the code to generate them (the data is coming from an API i'm using VueJS for this )

<template>
<div >
  <div  v-for="(question,index) in questions" :key="question    index">
    <div  v-for="tag in question.tags" :key ="tag   index">
      <span ><i :></i>  {{tag.nom}}</span>
    </div>
  </div>
</div>
</template>

Here is the rendering I get for a computer screen . Tags on computer

Here is the rendering I get for a smaller device . Tags on resized screen

CodePudding user response：

This is a case for flex-wrap. From MDN:

The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.

Since you're using Bootstrap 5, you can use the class flex-wrap. More information can be found on the Bootstrap 5 docs.

Here's the behavior you're encountering, and the same with flex-wrap:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div > 
  <h2>Default<h2>
  <div >
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
    </div>
</div>

<div > 
  <h2>With flex-wrap class<h2>
  <div >
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
      <div >Flex item</div>
    </div>
</div>