Why is flex container wrapper the flex items despite exceeding 100%? - css

Question

I want to make a 3 x 6 matrix. I used flexbox and all the flexItems have a flex-basis of 1/6.
At full screen, its how I want it. However, if you make it a smaller screen it starts to wrap. I don't want to break the 3 x 6
https://codesandbox.io/s/vibrant-spence-gski65
import "./styles.css";
import React, { useState } from "react";
const gridValues = new Array(18).fill(0);
export default function App() {
const [grid, setGrid] = useState<number[]>(gridValues);
return (
<div
style={{
width: "90%",
height: "100%"
}}
>
<div
style={{
display: "flex",
flexWrap: "wrap",
padding: "16px"
}}
>
{grid.map((num, i) => {
return (
<span
key={i}
style={{
display: "flex",
flexBasis: "16.666%",
cursor: "pointer",
justifyContent: "center",
padding: "16px",
border: "1px solid black",
flexShrink: 0
}}
>
<span style={{ opacity: 0 }}>{num}</span>
</span>
);
})}
</div>
</div>
);
}

Answer 1

https://codesandbox.io/s/vibrant-spence-gski65?file=/src/App.tsx
Ended up using CSS grid instead after listening to comment. Definitely much easier
import "./styles.css";
import React, { useState } from "react";
const gridValues = new Array(18).fill(0);
export default function App() {
const [grid, setGrid] = useState<number[]>(gridValues);
return (
<div
style={{
width: "90%",
height: "100%"
}}
>
<div
style={{
display: "grid",
gridTemplateColumns: "1fr 1fr 1fr 1fr 1fr 1fr",
gridTemplateRows: "1fr 1fr 1fr"
}}
>
{grid.map((num, i) => {
return (
<span
key={i}
style={{
display: "flex",
cursor: "pointer",
justifyContent: "center",
padding: "16px",
border: "1px solid black"
}}
>
<span style={{ opacity: 0 }}>{num}</span>
</span>
);
})}
</div>
</div>
);
}