Scrollable content inside a React.Box component

Question

I have a following view. The box (columnBox) can contain a lot of items. However in the view the box doesn't scroll. I have set overFlowY as auto , I can not set height as I don't know the exact height it will exand to. However my parent has fixed height, only that box contents need to be scrollable.

What can I do to fix this

columnBox: {
        overflowY:'auto',
        display: "flex",
        flexGrow: 1,
        flexDirection:"column"
    }

<Card
 height="calc(100vh - 200px)"
>
    <Box>
    <Divider />
    <Box height={88} p={4} display="flex" alignItems="center">
        {children}            
    </Box>
    <Divider />
   <Box className={classes.columnBox} bgcolor="green">
        {products &&
         products.length > 0 &&
         testProducts.map(item => {
           return (
               <Fragment>
                 <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                >
                  {someChildren}
                </Box>
                <Divider>
              <Fragment>
         })

Goutham J.M · Accepted Answer · 2021-04-08 12:13:06Z

2

You need to add max Height to columnBox then only it will get a scroll element and there is a mistake in your code you have added Card prop height="calc(100vh - 200px)" but it won't take calc values you need to pass it directly in styles like <Card style={{height:"calc(100vh-200px)"}}


columnBox: {
        overflowY:'auto',
        display: "flex",
        flexGrow: 1,
        flexDirection:"column",
        maxHeight:"200px"
    }

I have put the code here for it


import "./styles.css";
import { Card, Box, Divider } from "@material-ui/core";

const products = [
  "apple",
  "ball",
  "cat",
  "dog",
  "elephant",
  "apple",
  "ball",
  "cat",
  "dog",
  "elephant"
];
export default function App() {
  return (
    <div className="App">
      <Card style={{ height: "calc(100vh - 200px)" }}>
        <Box>
          <Divider />
          <Box height={88} p={4} display="flex" alignItems="center">
            <h1>Box</h1>
          </Box>
          <Divider />
          <Box
            bgcolor="green"
            style={{
              overflowY: "auto",
              maxHeight: "180px",
              display: "flex",
              flexGrow: 1,
              flexDirection: "column"
            }}
          >
            {products?.map((data) => {
              return (
                <>
                  <Box
                    display="flex"
                    justifyContent="space-between"
                    alignItems="center"
                  >
                    <p>{data}</p>
                  </Box>
                  <Divider />
                </>
              );
            })}
          </Box>
        </Box>
      </Card>
    </div>
  );
}

You can refer the CodeSandbox if you want

answered Apr 8, 2021 at 12:13

Goutham J.M

2,23421 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Muhammad Umar Over a year ago

Won't maxHeight limit the scroll, I will be able to scroll partially only, list can be long.

Goutham J.M Over a year ago

I got it then then pass maxHeight:inherit , then it will inherit height from parent , whatever the parent height is it will take that , if it crosses it then scroll will come

Collectives™ on Stack Overflow

Scrollable content inside a React.Box component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related