JSFiddle - React, Tailwind, and code Playground

HTML

<aside class="menu"></aside>

<header class="header">

  <section class="header__big-block">
    Проблема в том, что когда тут нет контента, то в этом варианте слишком сильно block1__block2 подтягивается вверх, а должен примерно 2/5 занимать от экрана по высоте
  </section>
  <section class="header__small-block hack-block">
    <div class="hack-block__content">
      asdasd
    </div>
    <div class="hack-block__opacity"></div>
  </section>
</header>

<main class="main-content">
  Помогите ньюфагу разобраться как надо сделать композицию блоков как на пикрил. Слева: меню - оно должно занимать 100% высоты браузерного окна и быть всегда приклеено к левой части и не скроллиться вверх-вниз вместе с правой частью страницы. В ширину оно
  допустим 300 пикселей Ширину-высоту изи делаю как {width: 300px; height: 100vh} Но как сделать что бы он был всегда в левой части экрана сорт оф дваче-меню левое, но не ездил, а был всегда блядь влитой. Справа: Блок1 - должен по началу занимать тоже
  100% высоты экрана, а по ширине получается должен быть 100% ширины экрана минус 300 пикселей (ширина меню) При этом может скроллиться дальше вниз. значит ли это что я в css пишу ему {width: 100vw; height: 100vh - 300 px;} Но нужно что бы он был справа
  от меню при этом и под ним можно было еще контента накидать. Блок2 - сидит приклеенный к низу блока 2 (к низу первоночального экрана) и по высоте по разному занимает в зависимости от контента. Его лепить по иерархии внутри блока 1 нужно или нет? Что
  бы он с ним не конфликтовал за место, а просто слоем сверху парил как бы. Блок3 - остаточный контент который скроллится вниз. Пока на вскидку приходит что нужно сделать как-то так: дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента
  дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента дохуя контента...

CSS

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
}

.menu {
  position: fixed;

  height: 100vh;
  width: 200px;

  background: #82939a;
}

.header {
  display: flex;
  flex-direction: column;

  height: 100vh;
  margin-left: 200px;

  background-image: url(https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fbipbap.ru%2Fwp-content%2Fuploads%2F2017%2F04%2Fmaxresdefault-1-7.jpg&f=1);
  background-size: cover;
  background-position: center;
}

.header__big-block {
  flex: 3;

  padding: 30px;

  overflow: hidden;
}

.header__small-block {
  flex: 2;
}

.hack-block {
  position: relative;
}

.hack-block__content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  padding: 30px;

  z-index: 2;
}

.hack-block__opacity {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background-color: #777;

  opacity: 0.5;
  z-index: 1;
}

.main-content {
  margin-left: 200px;
  padding: 30px;
}

.footer {
  margin-left: 200px;
  height: 300px;

  background-image: url(https://images.duckduckgo.com/iu/?u=http%3A%2F%2Fbipbap.ru%2Fwp-content%2Fuploads%2F2017%2F04%2Fmaxresdefault-1-7.jpg&f=1);
  background-size: cover;
  background-position: center;
}