CSS
Create a Flexible Sidebar and Main Content Layout with Flexbox
Build a dynamic two-column layout using Flexbox, where a sidebar maintains a fixed or minimum width and the main content area responsively fills the remaining available space.
.flex-layout {
display: flex;
min-height: 100vh; /* Ensures layout takes full viewport height */
}
.sidebar {
flex-shrink: 0; /* Prevents sidebar from shrinking */
width: 250px; /* Fixed width sidebar */
/* Or: flex-basis: 250px; flex-grow: 0; flex-shrink: 0; for more control */
background-color: #f0f0f0;
padding: 1rem;
}
.main-content {
flex-grow: 1; /* Main content takes up all available space */
background-color: #fff;
padding: 1rem;
overflow: auto; /* For scrollable content within main area */
}
How it works: This snippet demonstrates a common Flexbox layout for a sidebar and main content area. The `.flex-layout` container uses `display: flex`. The `.sidebar` is given a fixed width (`width: 250px`) and `flex-shrink: 0` to prevent it from shrinking. The `.main-content` uses `flex-grow: 1` which allows it to expand and occupy all remaining space, ensuring a responsive two-column layout where the main content adapts to the available width.