I am having troubles getting my main content next to the sidebar in a flexbox layout. My TopBar and SideBar components are combined into a single component, so they are returned in a single parent div. Is there a solution using CSS flexbox or do I have to use grid?
This is basically how it is returned:
<div style="display: flex; flex-wrap: wrap;"><div id="ParentNav"><div style="width: 100%; height: 48px; background-color: blue;">TopBar</div><div style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div></div><div style="flex-grow: 1; background-color: gold;">Main content</div></div>This is what I would like to achieve visually, but I cannot return the TopBar and SideBar seperately.
<div style="display: flex; flex-wrap: wrap;"><div style="width: 100%; height: 48px; background-color: blue;">TopBar</div><div style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div><div style="flex-grow: 1; background-color: gold;">Main content</div></div>