Sidebar with main content in Tailwind - Browser Rendering Trace

Render Flow - Sidebar with main content

Read HTML structure

↓

Create sidebar element

↓

Create main content element

↓

Apply Tailwind flex container

↓

Apply width and spacing classes

↓

Render sidebar on left

↓

Render main content on right

The browser reads the HTML, creates the sidebar and main content elements, then applies Tailwind CSS flexbox classes to arrange them side by side visually.

Render Steps - 3 Steps

Code Added:<div class="flex min-h-screen"> ... </div>

Before

[Empty page]

→

After

[__________________________]
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|                          |
|__________________________|

Adding a flex container that fills the full screen height but has no children yet, so it appears empty.

🔧 Browser Action:Creates flex formatting context and allocates full viewport height.

Code Sample

A sidebar fixed width on the left and a main content area filling the rest of the screen horizontally.

Tailwind

<div class="flex min-h-screen">
  <aside class="w-64 bg-gray-200 p-4">Sidebar content</aside>
  <main class="flex-1 p-4">Main content area</main>
</div>

Render Quiz - 3 Questions

After applying step 2, what do you see on the page?

A Sidebar and main content side by side

B Main content filling the whole screen

C A fixed width sidebar on the left with gray background

D Empty white page

Common Confusions - 3 Topics

Why does the main content not shrink smaller than the sidebar?

Because the sidebar has a fixed width (w-64) and the main content uses flex-grow (flex-1), it fills leftover space but won't shrink below zero. The sidebar's fixed width sets a minimum size.

💡 Fixed width sidebar + flex-grow main content means sidebar size is stable, main content adapts.

Why does the sidebar stretch full height of the screen?

The parent container has min-h-screen which sets minimum height to full viewport height, and flex makes children stretch vertically by default.

💡 Flex container with min-h-screen makes children fill vertical space.

What if I want the sidebar on the right instead of left?

You can reorder the HTML elements or use flex-row-reverse on the container to flip their order visually.

💡 Flexbox order depends on element order or flex-direction property.

Property Reference

Property	Value Applied	Axis/Direction	Visual Effect	Common Use
display	flex	main axis: row	Arranges children side by side horizontally	Layout containers
width	w-64 (16rem)	N/A	Fixed width for sidebar	Sidebar or fixed panels
flex-grow	flex-1	main axis	Main content fills remaining space	Flexible content areas
background-color	bg-gray-200	N/A	Light gray background for sidebar	Visual separation
padding	p-4 (1rem)	N/A	Adds space inside elements	Content spacing

Concept Snapshot

Use a flex container (class 'flex') to arrange sidebar and main content side by side. Sidebar gets fixed width with 'w-64' and background color. Main content uses 'flex-1' to fill remaining space. Add padding with 'p-4' for spacing inside. Use 'min-h-screen' on container to fill full viewport height. This creates a responsive sidebar layout.