Problem description

You are given an HTML structure with a container <div class="layout"> containing three child elements: <nav> for navigation, <main> for primary content, and <aside> for ads. Write CSS rules so:

1. The navigation sidebar is at least 200px wide but expands as needed to fit its content.

2. The main section takes all remaining space (flexible).

3. The ad panel fits its content width but never exceeds 300px.

Goal

Implement CSS in styles.css to define a grid layout on .layout using intrinsic sizing functions to satisfy the width requirements for each column.

Constraints

• Do not modify the HTML structure.

• Use only CSS (no JavaScript is allowed).

• Sidebar width must be ≥ 200px and expand up to its content’s required width.

• Main section must fill leftover space.

• Ad panel width must fit its content but not exceed 300px.

• Layout must reflow without overflow or visible gaps.

Sample visual output

Here’s what the output would look like:

Good luck trying the problem! If you’re unsure how to proceed, check the Solution.