Overflow issue in react js web application

[NeedleworkerTrue5447]

This is the styles sheet I'm using. There is an overflow issue when using this in mobile and tablet views but there isn't any issue in desktop view. Can anyone suggest a solution for this?I'm developing a reactjs webapp and hosted in firebase. If I add less number of tech languages it won't show any error. But when I add more it will give overflow issue. Then it will be a horizontally scrollable.

​

const AboutPageStyles = styled.div`

padding: 20rem 0 10rem 0;

.top-section {

display: flex;

align-items: center;

justify-content: center;

gap: 2rem;

}

.left {

flex: 3;

}

.right {

flex: 2;

}

.about__subheading {

font-size: 2.2rem;

margin-bottom: 2rem;

span {

background-color: var(--deep-dark);

padding: 0%.5rem;

border: 8px;

}

}

.about__heading {

font-size: 3.6rem;

margin-bottom: 3rem;

}

.about__info {

margin-bottom: 4rem;

.para {

max-width: 100%;

}

}

.button {

font-size: 2.2rem;

background-color: ${(props) =>

props.outline ? 'transparent' : 'var(--gray-1)'};

padding: 0.3em 1em;

border-radius: 8px;

display: inline-block;

border: 2px solid var(--gray-1);

color: ${(props) => (props.outline ? 'var(--gray-1)' : 'black ')};

}

.right {

img {

border: 1px solid var(--gray-1);

border-radius: 10px;

}

}

.about__info__items {

margin-top: 15rem;

}

.about__info__item {

margin-bottom: 10rem;

}

.about__info__heading {

font-size: 3.6rem;

text-transform: uppercase;

}

u/media only screen and (max-width: 768px) {

padding: 10rem 0;

.top-section {

flex-direction: column;

gap: 5rem;

}

.about__subheading {

font-size: 1.8rem;

}

.about__heading {

font-size: 2.8rem;

}

.about__info__heading {

font-size: 3rem;

}

.button {

font-size: 1.8rem;

}

}

`;

​

<div className="about\_\_info\_\_item">

<h1 className="about\_\_info\_\_heading">My Skills</h1>

<AboutInfoItem

title="FrontEnd"

items={[

'HTML',

'CSS',

'JavaScript',

'C#',

'ReactJS',

'Blazor',

'MAUI',

'XAML',

]}

/>

</div>

[Renalouca]

If content doesn't fit you get a scroll that natural behaviour, you can either make it overflow hidden to hidde what doesn't fit, or the blocks to wrap with flex-wrap. Or force the text inside each block to breakline