Sidebar and content that cannot overflow in HTML & CSS
HTML & CSS interview exercise on Grid, difficulty 3 of 3. Solve it in the editor beside a worked example, or cold in Interview mode with the example hidden; the tests run the moment you do.
A 240px menu on the left and the content on the right, as a grid filling the 720px app. The content holds a long unbreakable word and a wide code block: the content column must stay inside the app (the grid's 1fr track must be allowed to shrink below its content), the word must break, and the code block must scroll sideways on its own instead of pushing the layout.
Each exercise pairs a worked example with a twin problem to solve in a real editor; the tests run the moment you do. Interview mode hides the example: solve it from memory, without the hint or the solution, and it counts as solved cold. Progress is saved in your browser, and in your account if you sign in.