Below screencast shows how we can create a layout in Oxygen that has a fixed left sidebar and a scrolling content div on the right.

We shall add a logo and menu in the left sidebar and dynamic title and content in the right.

Notes:

Desktops

Parent Columns Div
height: 100vh
overflow: hidden

Left Div
width: 400px
background-color: #3d4c59
box-shadow: 5px 0 25px 0 rgba(0, 0, 0, 0.15)

Right Div

flex-grow: 1
overflow: scroll (or auto)

Responsive

Parent Div
Stack items vertically from 1120px and below
height: auto

Left Div
Stack child elements horizontally; space-between

Menu
background-color: #3d4c59;

Additional notes

If this method does not work for you as expected for whatever reason, try adding these:

Parent:
flex-wrap: no-wrap

Left Div:
flex-shrink: 0

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: