Html Question posted in
Some basic documentation can be found here.

Html – Flex Container with Scrollable Content

I have a flex container in which I want to have another flex container which scrolls content when it is too large to fit the screen. This is what I have so far:

<Box
    sx={{
        m: 'var(--Content-margin)',
        p: 'var(--Content-padding)',
        width: 'var(--Content-width)',
        flex: 1,
        display: 'flex',
        flexDirection: 'column',
        backgroundColor: 'green',
    }}
>
    <Box sx={{ flex: 1, overflow: 'scroll', backgroundColor: 'orange' }}>
        ... // long list of content
    </Box>
</Box>

I have tried playing around with all parameters but it does not work. It always adds the browser default scrolling and content just grows downwards.

Currently looks like the following. As you can see, the scrolling is on the browser level and not on the orange box:

Vertical Scrolling

Tags:

2

Answers


  1. 0

    You need to add a height to the orange box which fits the screen size. That way, the orange box won’t be bigger than the screen and the overflow will work.

    <Box
   sx={{ flex: 1, overflow: 'scroll', backgroundColor: 'orange', height: 'the height you want' }}
>
   // long list of content
</Box>
    Login or Signup to reply.
  2. 0

    The easiest way I know to fix this issue is to use flexbox with a height of 100% in the main container, this way it will adapt the height of the container to 100% of the screen size excluding the height of the nav.
    I added an example here https://codepen.io/mariajunqueira/pen/gONRveV

    html, body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

main {
  height: 100%;
  overflow: auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search