CSS
Full-Height Layout with Sticky Sidebar using Flexbox
Implement a common web layout featuring a full-height sidebar and a scrollable main content area within a Flexbox container, ensuring proper vertical distribution.
body {
margin: 0;
display: flex;
min-height: 100vh; /* Ensure the flex container takes full viewport height */
flex-direction: column; /* Stacks header/footer vertically if present */
}
.main-container {
display: flex;
flex-grow: 1; /* Main container takes remaining vertical space */
overflow: hidden; /* Important for containing scrollable content */
}
.sidebar {
width: 250px; /* Fixed width sidebar */
background-color: #f4f4f4;
padding: 20px;
flex-shrink: 0; /* Prevent sidebar from shrinking */
overflow-y: auto; /* Make sidebar content scrollable if it exceeds height */
}
.content-area {
flex-grow: 1; /* Main content takes all available horizontal space */
padding: 20px;
overflow-y: auto; /* Make main content scrollable */
background-color: #fff;
}
How it works: This snippet creates a typical web layout with a full-height sidebar and a main content area. The `body` acts as a flex container, ensuring the `.main-container` takes up all available vertical space (`flex-grow: 1`). The `.main-container` itself is also a flex container, positioning the `sidebar` and `content-area` horizontally. The sidebar has a fixed `width` and is prevented from shrinking (`flex-shrink: 0`), while the `content-area` grows to fill the rest. Both `sidebar` and `content-area` use `overflow-y: auto` to enable internal scrolling if their content overflows their respective heights.