CSS
Creating a Scrollable Flex Item within a Fixed Layout
Implement a scrollable content area within a Flexbox layout, ensuring fixed elements like headers or footers remain visible while the main content scrolls.
.app-layout {
display: flex;
flex-direction: column;
height: 100vh; /* Make container take full viewport height */
overflow: hidden; /* Prevent body scrolling when main-content scrolls */
}
.header, .footer {
flex-shrink: 0; /* Prevent header/footer from shrinking */
background-color: #eee;
padding: 15px;
text-align: center;
border-bottom: 1px solid #ccc;
font-family: sans-serif;
}
.main-content {
flex-grow: 1; /* Allow content to take available space */
overflow-y: auto; /* Enable vertical scrolling for this item */
padding: 20px;
background-color: #fff;
/* CRITICAL: For Firefox, min-height: 0; is often needed for overflow in flex items */
min-height: 0;
font-family: sans-serif;
line-height: 1.6;
}
How it works: This snippet demonstrates how to create a layout where a specific flex item, typically the main content area, becomes independently scrollable while other elements (like headers and footers) remain fixed in place. By setting `flex-grow: 1` on the content, it expands to fill available space. Adding `overflow-y: auto` then enables vertical scrolling within that item if its content exceeds its height. The `min-height: 0` property is crucial for ensuring `overflow: auto` works correctly in Firefox within a flex container, preventing content from 'pushing' the container's height.