Flexbox: How to manage padding between boxes in a specific example?

Question

css

code pen

scss

* {
  box-sizing: border-box;
  color: white;
}

.layout {
  display: flex;  
  flex-flow: row wrap;
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  
  &__canvas {
    margin: -15px;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    flex-grow: 1;
  }
  
  &__sidebar {
    display: flex;
    flex-basis: 33.33%;
    padding: 15px;
    max-width: 33.33%;
    background: green;
    height: 700px;
    justify-content: center;
    align-items: center;
  }
  
  &__body {
    display: flex;
    flex-basis: 66.66%;
    padding: 15px;
    max-width: 66.66%;
    flex-flow: row wrap;
    align-items: flex-start;
    justify-content: flex-start;
    background: red;
  }
}

.top, .bottom {
    display: flex;
    flex-grow: 1;
    margin: -15px;
    width: 100%;
    align-items: flex-start;
    justify-content: flex-start;
    
    &_left, &_right {
      max-width: 50%;
      flex-basis: 50%;
      padding: 15px;
    }
    
    &_left {
      background: purple;
    }
    
    &_right {
      background: yellow;
    }
  }

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 100px;
  background: #000;
}

html

<main class="layout">
  <div class="layout__canvas">
    <aside class="layout__sidebar">Sidebar</aside>
    <div class="layout__body">
      <div class="top">
        <div class="top_left"><div class="block">Row1 Block1</div></div>
        <div class="top_right"><div class="block">Row1 Block2</div></div>
      </div>
      <div class="bottom">
        <div class="top_left"><div class="block">Row2 Block3</div></div>
        <div class="top_right"><div class="block">Row2 Block4</div></div>
      </div>
    </div>
  </div>
</main>

The distance between the first and second row ( .top and .bottom ) does not want to change in any way and depends only on the height of the sidebar.
Help me to understand.

Answer 1

Add .layout__body align-content: flex-start;