CODEWITHSUNDEEP
reactjsmaterial-ui
Phil Brockman
Phil Brockman

Reputation: 350

Overflowing exactly one Grid item in Material-UI

I am using Material-UI and trying to make a Grid that contains two Grid Items:

  1. a List of dozens of ListItems.
  2. a static control panel.

Here is an example minimal sandbox that I'm starting with: https://codesandbox.io/s/material-ui-grid-center-vertically-v2-forked-cju60?file=/index.js

In my ideal world, I would like Column 1 to scroll and Column 2 to remain in place. That is, the height of the parent Grid would match the green column's height and the yellow column would overflow into a scroll of a matching height.

Unfortunately, I cannot set a height (or max-height) of the Grid itself (with something like style={{maxHeight: "500px", overflow:"scroll"}} as this causes both columns to scroll. Further, I cannot set a fixed height for the green column, as the user can dynamically add and remove selectors from that column.

Is the functionality I'm looking for possible?

Upvotes: 0

Views: 5590

Answers (1)

Claire Lin
Claire Lin

Reputation: 2382

In order for the scroll to work, you'll have to have a "fixed" height somewhere, either on the parent, or on the yellow Grid. Otherwise the browser doesn't know where to cut off for the scrollbar to show.

An easy option is to set the height (100vh or any fixed pixel) on parent, then let both children take 100% of the parent's height.

Another option is to have a max-height on the yellow Grid (100vh as in the example below) and let the parent have height: fit-content so it takes exactly the same height as the yellow Grid, and the green Grid, being display: block should automatically take up all the available space in the parent.

CodeSandbox example: https://codesandbox.io/s/material-ui-grid-center-vertically-v2-forked-26e75?file=/index.js

Upvotes: 2

Related Questions