Small bug in example code for the Technical Documentation page


I am just going through the Responsive Web Design Projects, currently building the Technical Documentation page. I noticed that the example you gave has a small bug in the navigation bar fixed to the left side of the screen.

The navbar contains a header and a list, and its position is fixed. The height of the list is set at 88% and the overflow is set to auto, so it should scroll when its contents do not fit anymore. However, if I make the browser height sufficiently low, the list’s height will become larger than the available space (e.g. browser height = 400px), and the list will not scroll until its last item. I discovered, after many hours, that this is because of the header element taking up additional space from the navbar container.

The solution I found is to either use the calc() function when setting the height of the list, or, more elegantly, use flexbox.

It would have helped a lot to have this example on the provided technical documentation page as I struggled for half a day trying to understand why that strange behaviour was occurring. I appreciate my described example is not exactly real-world, but it’s a good lesson to understand what height percentages actually mean.

So I was wondering if there is any way you could amend the technical documentation page you provide as an example.


Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.