Flex horizontal scroll with wrap max 2 rows - css

Question

I'm using Mantine.dev with Nextjs and I have this part design.
I have a list of strings, the length is unknown, there might be any amount and in a wide viewport they can wrap as many there are, no max height limit but in a small viewport, there should be only 2 rows in a way that it makes horizontal scrolling
This is what it currently looks like in small viewport
The code
<ScrollArea>
<Flex wrap='wrap' rowGap={10} columnGap={8} h={{ base: 65, sm: 'auto' }}>
{services.map((service, i) => (<Button>{service}</Button>))}
</Flex>
</ScrollArea>

Answer 1

You can achieve this with a MediaQuery component and a Box component instead of Flex because we need to change our layout from display: flex; to column-count: 2; and change writing-mode: vertical-lr; to get the result.
import { ScrollArea, Button, Box, MediaQuery } from "#mantine/core";
const services = [
"Frontend",
"Backend",
"FullStack",
"DevOps",
...
];
export default function App() {
const boxStyles = {
display: "flex",
justifyContent: "flex-start",
flexWrap: "wrap",
columnGap: 8,
rowGap: 10
};
const boxStylesSM = {
display: "block",
columnCount: 2,
columnGap: 10,
writingMode: "vertical-lr"
};
const buttonStyle = {
display: "flex",
justifyContent: "center",
alignItems: "center",
whiteSpace: "nowrap"
writingMode: "horizontal-tb" // Fix for Firefox
};
const buttonStyleSM = {
marginRight: 8
};
return (
<div className="App">
<ScrollArea type="auto" sx={{ padding: "0.8rem 0.5rem" }}>
<MediaQuery smallerThan="sm" styles={boxStylesSM}>
<Box sx={boxStyles}>
{services.map((service, i) => (
<MediaQuery smallerThan="sm" styles={buttonStyleSM}>
<Button sx={buttonStyle} key={i}>
{service}
</Button>
</MediaQuery>
))}
</Box>
</MediaQuery>
</ScrollArea>
</div>
);
}