css Question posted in
Some basic documentation can be found here.

CSS Flexbox with a component returning TopBar and SideBar and another one returning main content

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>
Tags:

2

Answers


  1. 0

    If you can’t modify html…

    I think it’s possible to set the position of the topbar to absolute and match it by giving margin as high as the topbar at the top of the navbar, main content.

    As long as the style can be applied freely.

    Method 1

    position absolute, and margin

    .wrapper {
  position: relative;
}

.top-bar {
  position: absolute;
}

.side-bar {
  margin-top: 48px;
}

.main-content {
  margin-top: 48px;
}
    <div class="wrapper" style="display: flex; flex-wrap: wrap;">
  <div id="ParentNav">
    <div class="top-bar" style="width: 100%; height: 48px; background-color: blue;">TopBar</div>
    <div class="side-bar" style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
  </div>
  <div class="main-content" style="flex-grow: 1; background-color: gold;">Main content</div>
</div>

    Method2

    use grid
    set the properties as contents so that ParentNav’s children can be handled in the grid.

    #ParentNav

    .wrapper {
  display: grid;
  grid-template-columns: 256px 1fr;
  grid-template-rows: 48px 1fr;
  height: 100vh;
}

.wrapper>#ParentNav {
  display: contents;
}

.wrapper>#ParentNav>.top-bar {
  grid-column-start: 1;
  grid-column-end: -1;
  grid-row: 1;
}

.wrapper>#ParentNav>.side-bar {
  grid-column: 1;
  grid-row: 2;
}

.wrapper>.main-content {
  grid-column: 2;
  grid-row: 2;
}
    <div class="wrapper">
  <div id="ParentNav">
    <div class="top-bar" style="width: 100%; height: 48px; background-color: blue;">TopBar</div>
    <div class="side-bar" style="width: 256px; min-height: calc(100vh - 48px); background-color: grey;">SideBar</div>
  </div>
  <div class="main-content" style="flex-grow: 1; background-color: gold;">Main content</div>
</div>
    Login or Signup to reply.
  2. 0

    Yes, you can use

    flex-direction: column

    to get the required output.

    Updated Html file:

    <div style="display: flex; flex-direction: column; height: 100vh;">
  <div style="width: 100%; height: 48px; background-color: blue;">TopBar</div>
  <div style="display: flex; flex: 1;">
    <div id="ParentNav" style="width: 256px; background-color: grey;">SideBar</div>
    <div style="flex-grow: 1; background-color: gold;">Main content</div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search