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; 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. Progress is saved in your browser, and in your account if you sign in.