Tailwind text not overflowing in react

Question

I'm having a problem with my text not overflowing in my React/tailwind app. I want the text to be scrollable horizontally on mobile but my text seems to be contained and if I make the screen smaller the container keeps resizing instead of overflowing. In any other App, this would be a godsend but I need it to overflow so I can scroll it just like if you view the links on this site on mobile for example...

https://www.glossier.com/

glossier.com horizontal scroll example

At the moment my code looks like this. As you can see the text fits to size inside their respective divs by stacking ontop of each other instead of each letter sitting side by side.

My app example

Here is the code for my component:

import React from 'react';
import { Link } from 'react-router-dom';

const Scrolllinks = () => {
    return (
        <div className="flex flex-row w-full overflow-x-scroll uppercase">
                <Link className="box-border">Hydra Boost Daily Lenses</Link>
                <Link className="box-border">Blue Light Glasses</Link>
                <Link className="box-border">Hydration Drops</Link>
        </div>
    )
}

export default Scrolllinks;

Answer 1

The parent element only needs flex and overflow-x-scroll. All of the children, <Link> in your case, need flex-shrink-0, this will prevent them from wrapping.

Answer 2

You can hold Shift + Scroll it would be working