Overview

Very simple to use container, allowing many columns to be scrollable on the same page (like a kanban).

The height can be fixed in pixel or percentatage or can be dynamic to automatically reach at the bottom of the screen, and dynamically resize when the size of the window changes.

Documentation

Typical usage scenario

One or many scrollable areas on the same page, nested in other layouts rows and/or columns.

Note :The standard "scroll container" requires to be the root elementof the page, it can't be nested into anything.

Configuration

You can customize the CSS class .mx-scrollDynamicHeightContainer

Be cautious about responsive behavior. On mobile or tablet, using a fixed height (pixel or percentage) is probably easier, but if you use the dynamic height for mobile or tablet, make sure to configure the layout to keep the scroll container in a column, otherwise the rest of the page wouldn't be accessible anymore because the scroll container would fit 100% of width and height.

In Dynamic mode, the height will dynamically adapt to reach the bottom of the screen. The CSS syntax looks like : 100vh (screen height)  - elementYPosition - marginCorrection