Interactive online courses HTML Academy
2026-03-09 10:54 Diff
https://htmlacademy.org/courses/layout/flexbox-2/flexible-menu-2

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Flexible menu with overflow, part 2

Now all we have to do is assign a growth factor to the menu items and test how the menu behaves if we decide to change its width or add items.

We can conveniently adapt the resulting solution to mobile interfaces. You don’t even need to add additional styles for mobile viewports.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Flexible menu with overflow, part 2</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="subtle"> <header> <div class="logo"> <img src="img/keksby.svg" alt="Keksby"> </div> <nav class="menu"> <div> <a href="#">Norwegian salmon</a> </div> <div> <a href="#">Wolffish</a> </div> <div> <a href="#">Crucian</a> </div> <div> <a href="#">Perch</a> </div> <div> <a href="#">Mirror carp</a> </div> <div> <a href="#">Shark</a> </div> </nav> </header> </body> </html>

CSS

.menu { display: flex; flex-wrap: wrap; }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. Set a growth factor of 1 for all child divs in the .menu,
  2. and then add another div with the text link Som as the last item in the menu.
  3. Then assign a width of 300px to the .menu block,
  4. and then assign 200px to it.