Why does my stretch attribute in mui flexbox not do anything? - html

Question

So I want the boxes I have displayed in a parent box to completely stretch out. I followed the documentation on MUI for the flexbox, though after editing it a bit I do not understand why it does not work anymore :?
I have given the inner items a minimum for width and height, but even without this the items do not stretch.
Does the stretch attribute not mean that the parent container will be completely filled out?
Here's my code:
import "./styles.css";
import React from "react";
import Box, { BoxProps } from "#mui/material/Box";
import PropTypes from "prop-types";
function Item(props) {
const { sx, ...other } = props;
return (
<Box
sx={{
border: "1px solid pink",
borderRadius: 2,
fontSize: "0.875rem",
minHeight: "5rem",
minWidth: "5rem",
...sx
}}
{...other}
/>
);
}
Item.propTypes = {
sx: PropTypes.oneOfType([
PropTypes.arrayOf(
PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])
),
PropTypes.func,
PropTypes.object
])
};
export default function App() {
const items = [
{
title: "Car",
color: "yellow"
},
{
title: "Plane",
color: "lightblue"
},
{
title: "Bicycle",
color: "lightgreen"
},
{
title: "Train",
color: "orange"
}
];
const movies = [
{
title: "Seven",
color: "red"
},
{
title: "Memento",
color: "white"
},
{
title: "Vivarium",
color: "lightgreen"
},
{
title: "Blue Velvet",
color: "lightblue"
}
];
return (
<>
<Box
className="Container Of Sub"
style={{
backgroundColor: "lightpink",
display: "flex",
alignItems: "center",
width: "100%",
height: "100%"
}}
>
<Box className="FirstSub" style={{ width: "50%" }}>
<Box
className="Header"
style={{
borderRadius: "10px",
paddingLeft: "10px",
boxShadow: "4px 4px 20px 0px rgba(0,0,0,0.25",
backgroundColor: "white"
}}
>
<h4>Subcategory 1</h4>
</Box>
<Box
className="Category Holder"
sx={{
display: "flex",
flexWrap: "wrap",
alignContent: "stretch",
borderRadius: 1
}}
>
{items.map((item) => (
<Item
sx={{
backgroundColor: item.color
}}
>
{item.title}
</Item>
))}
</Box>
</Box>
<Box
className="2ndSubCategory"
style={{
width: "50%",
marginLeft: "20px"
}}
>
<Box
className="Header"
style={{
borderRadius: "10px",
paddingLeft: "10px",
boxShadow: "4px 4px 20px 0px rgba(0,0,0,0.25",
backgroundColor: "white"
}}
>
<h4>Subcategory 2</h4>
</Box>
<Box
className="Category Holder"
sx={{
display: "flex",
flexWrap: "wrap",
alignContent: "stretch",
borderRadius: 1
}}
>
{movies.map((item) => (
<Item
sx={{
backgroundColor: item.color
}}
>
{item.title}
</Item>
))}
</Box>
</Box>
</Box>
</>
);
}