Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Flexbox and vertical scroll in a full-height app using newer Flexbox API with HTML
The flex property is a shorthand for the flex-grow, flex-shrink, and flex-basis properties. The flex property sets the flexible length on flexible items. When creating full-height applications with scrollable content areas, proper flexbox configuration is essential.
Basic Flexbox Scroll Setup
To create a scrollable flex item that takes up remaining space, use flex: 1 1 auto with overflow-y: auto:
<!DOCTYPE html>
<html>
<head>
<style>
#container {
display: flex;
flex-direction: column;
height: 100vh;
}
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 0px; /* Forces flex item to respect container bounds */
padding: 20px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="container">
<header style="background: #f0f0f0; padding: 10px;">Fixed Header</header>
<article>
<h3>Scrollable Content</h3>
<p>This content will scroll when it overflows...</p>
<p>Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>
Line 6<br>Line 7<br>Line 8<br>Line 9<br>Line 10<br>
Line 11<br>Line 12<br>Line 13<br>Line 14<br>Line 15</p>
</article>
<footer style="background: #f0f0f0; padding: 10px;">Fixed Footer</footer>
</div>
</body>
</html>
Setting Minimum Height
If you want a minimum height for the scrollable area, set height to your desired minimum value. This acts as min-height in a flex context:
#container article {
flex: 1 1 auto;
overflow-y: auto;
height: 100px; /* Minimum height of 100px */
padding: 20px;
}
Modern Flexbox Properties
Using modern CSS without vendor prefixes:
.scroll-container {
display: flex;
flex-direction: column;
height: 100vh;
}
.scroll-area {
flex: 1 1 auto;
overflow-y: auto;
height: 0; /* Critical for proper flex behavior */
}
Key Points
-
height: 0pxforces the flex item to respect container boundaries -
flex: 1 1 autoallows growth, shrinking, and auto basis -
overflow-y: autoenables vertical scrolling when needed - Modern browsers no longer require
-webkit-prefixes
Conclusion
Combining flex: 1 1 auto with height: 0 and overflow-y: auto creates properly scrollable flex items. The height value acts as a minimum height constraint in flex layouts.
Updated on: 2026-03-15T23:18:59+05:30
660 Views
Advertisements