Flexbox Layout: Fixed Sidebar and Scrollable Content

body {
  display: flex;
  min-height: 100vh;
  margin: 0;
}

.sidebar {
  flex: 0 0 250px; /* Fixed width sidebar, no grow/shrink */
  background-color: #f0f0f0;
  padding: 20px;
  overflow-y: auto; /* Enable scrolling for the sidebar if content exceeds height */
}

.main-content {
  flex: 1; /* Main content takes remaining space */
  padding: 20px;
  overflow-y: auto; /* Enable scrolling for the main content */
  background-color: #ffffff;
}

How it works: This Flexbox snippet creates a responsive layout with a fixed sidebar and a scrollable main content area. `body` is set to `display: flex` and `min-height: 100vh` to ensure it takes full viewport height. The `.sidebar` uses `flex: 0 0 250px` to fix its width to 250px, preventing it from growing or shrinking. The `.main-content` uses `flex: 1` to occupy all available remaining space. Both `overflow-y: auto` allow their respective content areas to scroll independently if their content overflows.