Aligning a layout with flexbox

Question

https://codepen.io/Aspiring/pen/yLbwrOe

.flex-container {
  background-color: gray;
  display: flex;
  width: 100%;
  height: 100vh;
}

.sidebar {
  background-color: red;
  border: 2px solid black;
  height: 100vh;
  width: 250px;
}

.topheader {
  background-color: blue;
  border: 2px solid black;
  height: 100px;
  width: 100%;
}

<div class="flex-container">

  <div class="sidebar">Sidebar</div>
  <div class="topheader">Head</div>

  <div class="content">

    <header>Hello</header>
    <main>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni voluptas odio repellat facilis officia
    </main>
  </div>
</div>

My goal is to align the div.sidebar and div.topheader of my layout to where they will scale correctly with my page and I can use the div.flex-container to input the main content and articles, I'm basically making a Wiki style page for practice and understanding of flexbox. Additional information on best practice or resources other than MDN would be much appreciated.

I did additional editing in trying to solve my own issue, using what I know and got as far as the image shown... The is messy so i just left the orgianl unedited code on the codepen

Just starting flexbox and learning.

Answer 1

Flexbox:

Flexbox can only control height or width. It can not control both at the same time. As such you need 2 flexbox wrappers as shown in the snippet below

.flex-container-horizontal {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: 50%;
}

.flex-container-vertical {
  display: flex;
  flex-direction: column;
  width: 50%;
}

.content {
  flex: 1;
}

/* for styling pupose only */
body {
  margin: 0;
}

.sidebar {
  background-color: red;
}

.topheader {
  background-color: blue;
}

.content {
  background-color: yellow;
}

<div class="flex-container-horizontal">
  <div class="sidebar">Sidebar</div>
  <div class="flex-container-vertical">
    <div class="topheader">Head</div>
    <div class="content">
      <header>Hello</header>
      <main>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni voluptas odio repellat facilis officia
      </main>
    </div>
  </div>
</div>

CSS-Grid:

The more appropiate tool in your case would be CSS-Grid. Only downside is that it is only partially supported by IE. However IE will be started to be deprecated at the 16th August 2021. You either can use span as in my example or use grid-template-areas. Grid can control both height and width at the same time.

.grid-container {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: min-content auto;
}

.sidebar {
  grid-row: span 2;
}


/* for styling pupose only */

body {
  margin: 0;
}

.sidebar {
  background-color: red;
}

.topheader {
  background-color: blue;
}

.content {
  background-color: yellow;
}

<div class="grid-container">
  <div class="sidebar">Sidebar</div>
  <div class="topheader">Head</div>
  <div class="content">
    <header>Hello</header>
    <main>
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni voluptas odio repellat facilis officia
    </main>
  </div>
</div>