Как правильно сверстать sidebar + main?

Question

[Дмитрий Кузнецов]

Есть такой код:

<div>
    <div class="bg-secondary-800 border-b border-secondary-700">
      <div class="px-2">
        <nav class="relative flex items-center justify-between h-16">

        </nav>
      </div>
    </div>

    <div class="flex flex-row">
      <div class="min-h-screen w-80">
        <aside class="h-full bg-secondary-800 p-2">
          <nav>
            <a href="#">Lorem.</a>
            <a href="#">Et.</a>
            <a href="#">Omnis!</a>
            <a href="#">Dolor!</a>
          </nav>
        </aside>
      </div>

      <div class="w-full">
        <main class="p-2">
          lorem1000 (Генерация 1000 слов)
        </main>
      </div>
    </div>
  </div>

Хочу сделать так, чтобы sidebar и navbar оставался нетронутым при скроле, а скролился только main. Как это сделать?

Answer 1

[Дима Неиграйсними]

.min-h-screen{position:fixed;width:20%;}
.w-full{width:80%;margin-left:20%;}