Question 248289 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – MUI Grid children taking too much space

I’m trying to render two large blobs of text side by side, each of which may or may not include new lines or any whitespace. I’m attempting to use a Material UI Grid however the grids are not behaving the way I would expect.

I have created a small example here showing my issue https://codesandbox.io/s/react-mui-forked-rzzk26?file=/index.js

Based on the background color of the boxes added to the grid, the grid itself is working correctly however the text is overflowing
enter image description here

How can I cause the long text in the blue box to wrap to a new line and never overflow outside its parents bounds?

Thanks

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    EDIT: After a bt of debugging, I determined the culperate was this Box that was wrapping all other components in my application:

    <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
  {children}
</Box>

    Adding overflow: "hidden" to this components style resolved my issues

    This answer How to wrap text without spaces in React? got me to a working example. Its still not working in my main project but at least I've narrowed it down to something external to the grid causing issues.

    <Grid container spacing={2}>
      <Grid item xs={6}>
        <Box
          color={"red"}
          style={{
            flexWrap: "wrap",
            wordWrap: "break-word",
          }}
        >
          {requestContent}
        </Box>
      </Grid>
      <Grid item xs={6}>
        <Box
          color={"primary.secondary"}
          style={{
            flexWrap: "wrap",
            wordWrap: "break-word",
          }}
        >
          {responseContent}
        </Box>
      </Grid>
    </Grid>

  2. 0

    You can use flexWrap: "wrap" with specific width. If it is not working then provide a code.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search