Tailwind / Css flexbox: limit height of child scrollable element based on small sibling

Presenting a css approach to crafting a vertically scrollable list, this method leverages the power of flexbox to seamlessly adapt to the space allocated by a neighboring element. Both a pure CSS rendition and a Tailwind CSS variation are at your disposal.

Use Case:

Our specific requirement called for the creation of a container featuring two distinct columns:

1. The left-hand column needed to accommodate a chart area that could expand as needed.
2. The right-hand column had to house a list that scrolled vertically and utilized the entire available height.

Requirements:

Our key requirements were as follows:

• The chart area should have the capacity to hold an canvas element.
• The scrollable list should adapt its height based on the chart area’s dimensions, displaying as many items as possible within that space while providing vertical scrolling when necessary.

Challenges:

We encountered a challenge when applying flexbox alongside the overflow: scroll property and rendering the list of items directly. In this scenario, the list would inadvertently increase the container’s height, failing to adhere to the height set by the textarea in the left-hand column.

Our Solution for the Scrollable List:

To overcome this challenge, we devised a solution involving several steps:

We introduced a flex wrapper called “container” and applied the overflow-y: scroll; flex: 1 1 0%; property to it.

An additional wrapper, termed “list-container,” was introduced around the list of items that could potentially overflow. This wrapper was given a max-height: 0; property.

We proceeded to render the list of items within this newly created “list-container.”

Notably, if we had chosen to render the items directly within the “container,” they would have increased its height, undermining the desired layout dictated by the textarea on the left.

By employing the “list-container” with a max-height: 0; property, we ensured that it did not alter the height of the “container.” As we did not explicitly define the overflow behavior for the “list-container,” it defaulted to visible. However, with overflow-y: scroll set at the “container” level, we successfully achieved the scrolling functionality we sought.