import React from 'react';
import './style.css';
import Container from '@mui/material/Container';
//import Grid from '@mui/material/Unstable_Grid2'; // Grid version 2
import Grid from '@mui/material/Grid';
export default function App() {
return (
<Container fixed>
<h1>Hello StackBlitz!</h1>
<Grid container spacing={2}>
<Grid item xs={8} md={8}>
<p>
!!ldsfjsdlkfjklsdsdjflksdfjldskfjdlskfjdslkfjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjlkjdsflksdjfklsdjflkdsfjlksdfjlsdkfldsjflkdsjlkffjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjlk
</p>
</Grid>
<Grid item xs={4} md={4}>
<p>
ldsfjsdlkfjklsdsdjflksdfjldskfjdlskfjdslkfjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjljdsflksdjfklsdjflkdsfjlksdfjlsdkfldsjflkdsjlkffjdslkfjsdlkfdsfjlkdsjfkldsjflksdfjsdlkfjlk
</p>
</Grid>
</Grid>
</Container>
);
}
https://i.sstatic.net/WnKvA.png
I want to not overlap elements in the grid on smaller screens. I believe the text content inside the p tag should be split into new lines.
I also attempted using the new Grid (version 2) component, but it did not solve the issue.