Issues with completing Technical Documentation Page challenge


I am working on creating a Technical Documentation page, and my code is passing all tests except for the Media Query test (which I have not worked on yet). However, I am facing two challenges. First challenge is to have a scroll bar work for each div independently (just like the sample page shown in the challenge). I have tried various options including using the option ‘overflow-y: scroll’ and ‘overflow-y: auto’ for each scroll bar independently as also using a separate div with ‘overflow-y’ set to ‘scroll’. However. it is not working out. When I click on a link in the left pane, the right pane scrolls correctly but the left one also does so (whereas ideally, left pane should not scroll). Also, I am having a challenge setting the width of individual line items correctly in the left pane. Their width is limited to the width of contained text whereas I want it to be equal to the width of surrounding container so that the border line may extend across the entire width (again as shown in the sample page). My current work is on this code pen:

I would appreciate your help in order to get past these two challenges.


Your code so far

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Build a Technical Documentation Page

Link to the challenge: