How to Enable Vertical Scroll in a Full-Height Flexbox App?

Combining Flexbox and Vertical Scroll in Full-Height Applications

Problem:

Creating a full-height app layout using flexbox while enabling vertical scrolling.

Discussion:

Using the latest flexbox properties, an app layout with full height can be achieved. However, adding vertical scroll can be challenging.

The initial approach using an outdated flexbox layout (e.g., display: box) is viable for browsers supporting only that older version.

To work around this issue, a hack has been proposed, which involves setting the container's height to 0px. While this workaround resolves the scroll issue, it creates new problems.

Solution:

The ideal solution is to set a height to the scrollable element within the flexbox layout. By default, flexbox calculates the height of its elements, so a height of 0px will effectively enable vertical scroll.

If a minimum height is desired, min-height can be used instead, e.g., min-height: 100px.

Code Example:

This approach ensures that the scrollable element has a height while allowing flexbox to recalculate it dynamically.

Updated Fiddle:

[Updated JSFiddle](http://jsfiddle.net/ch7n6/867/) demonstrates the final solution.

The above is the detailed content of How to Enable Vertical Scroll in a Full-Height Flexbox App?. For more information, please follow other related articles on the PHP Chinese website!