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.



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)


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

Left Div
Stack child elements horizontally; space-between

background-color: #3d4c59;

Additional notes

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

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?


Find the article helpful and wish to donate?



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: