Scroll only in one grid column with semanti-ui-react

Viewed 411

In this sandbox I have a two-column grid, that I want to make only the right column scrollable. This means the left column/menu should not go out of the screen by scrolling on the browser.

by giving position: fixed to the left column and marginLeft:somePixels to the right column it somehow works but if the content stacks on the smaller resolution, the layout gets destroyed.

How can I achieve this with semantic css classes or a custom style

1 Answers

You need to add to every element, from root to the container you want to scroll, the height: 100%.

Because it need to know what is the full dimension you need to scroll.

This is the sandbox fixed.

Related