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
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: