height of div is not filling 100% body height-CodePudding

I have a sidebar a header and a main container. main container and header is nested inside a parent div. When I set height 100% for both sidebar and main container the sidebar doesn't take 100% of the height of the body. I was thinking to not use any percentage values and let flexbox do the work. But I suspect that as I append elements inside the main container area sidebar will behave the same and not take the height of the body space. How can I fix this?

html {
  height: 100%;
}

body {
  margin: 0;
}

.sidebar {
  display: inline-flex;
  min-height: 100vh;
}

.sidebar-container {
  background-color: #00ffff;
  width: fit-content;
}

.header_main {
  display: inline-block;
  position: absolute;
  color: white;
}

.header {
  background-color: black;
  width: 100vw;
}

.main {
  height: 100vh;
  width: 100vw;
  background-color: bisque;
}

<div >
  <div >sidebar</div>
</div>
<div >
  <div >header</div>
  <div >main</div>
</div>

CodePudding user response：

Easiest way would be to use CSS-Grid. Then simply set the body as grid-container and give it a min-height: 100vh:

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: min-content auto;
}

aside {
  width: fit-content;
  background-color: #00ffff;
  grid-row: 1 / -1;
}

header {
  background-color: pink;
}

main {
  background-color: bisque;
}

<aside>Sidebar</aside>
<header>Header</header>
<main>Main</main>