--- name: responsive-slide description: Create responsive card\/slide layouts with fixed headers and flexible content zones. Use when building presentation slides, dashboard cards, or any layout with fixed and flexible regions. allowed-tools: Read, Edit, Write --- # Responsive Slide\/Card Layouts Create presentation-style cards with zones that adapt to different aspect ratios while keeping headers fixed. ## The Problem When changing aspect ratios (16:9 → 16:4), content zones need to: - Keep headers\/titles at FIXED size - Have content areas SHRINK to fit remaining space - Enable scrolling when content overflows - Have charts\/visualizations fill exact available space ## Key CSS Patterns ### 1. Grid Setup with Fixed + Flexible Rows ```css .slide { display: grid; grid-template-columns: 35% 1fr; grid-template-rows: auto 1fr; \/* auto = fixed header, 1fr = flexible content *\/ overflow: hidden; } ``` ### 2. The Critical `min-height: 0` Rule By default, flex items won't shrink below their content's minimum size. This breaks responsive layouts. ```css \/* WRONG - content won't shrink *\/ .content-zone { display: flex; flex-direction: column; } \/* CORRECT - content can shrink *\/ .content-zone { display: flex; flex-direction: column; min-height: 0; \/* CRITICAL *\/ overflow: hidden; } .content-zone__inner { flex: 1; min-height: 0; \/* CRITICAL - on the flex item too *\/ overflow-y: auto; } ``` ### 3. Absolute Positioning for Exact Fill For charts or content that must fill exact available space: ```css .viz-content { flex: 1; min-height: 0; position: relative; \/* Establish positioning context *\/ } .chart-container { position: absolute; inset: 0; \/* Fill parent exactly - top:0, right:0, bottom:0, left:0 *\/ } ``` ### 4. Prevent Header Shrinking ```css .header { flex-shrink: 0; \/* Never shrink *\/ } ``` ## Complete Slide Structure ```html

Section<\/span>

Title<\/h1> <\/div>

<\/div> <\/div>

<\/div>