JSFiddle - React, Tailwind, and code Playground

by 7856241

HTML

<body>

<div class="page">

  <header class="sectionRow1">
    <div class="headerlogo">
      <a href="#">Header</a>
    </div>
  </header>

  <section class="sectionRow2">
    <nav class="sectionRow2Col1">
      <div class="menuitems">
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
          <a href="#" class="link">Link</a>
      </div>
      <div class="menufoot">Footer</div>
    </nav>

    <section class="sectionRow2Col2">
        <div class="content">
          Content..
          <br /><br /><br /><br /><br /><br /><br /><br /><br...

CSS

html, body {
      height: 100%;   
      margin: 0; 
      overflow: hidden;  
    }

    .page {
      display: flex;
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
    }

    .sectionRow1 {
      display: flex;      
      flex-direction: row;
      flex-grow: 0;
      background-color: yellow;
      border-bottom: 1px solid silver;
    }  

    .sectionRow2 {
      display: flex;     
      flex-direction: row;
      flex-grow: 1;
      background-color: blue;
      height: 100%;
    }

    .sectionRow2Col1 {
      display: flex;     
      flex-direction: column;
      background-color: silver;
      border-right: 1px solid silver;
      width: 250px;
      height: 100%;
    }

    .sectionRow2Col2 {
      display: flex;      
      flex-direction: column;
      flex-grow: 1;
      height: 100%;
      background-color: lightgrey;
    }

    .menuitems {
      flex: 1 1 auto;
      overflow-y: auto;
      height: 100%;
    }

    .menufoot {
      display: flex;
      background-color: lavender;
      height: 40px;
    }

    .link {
      display: flex;
      flex-direction: row;    
      align-items: center;
      padding: 4px 4px 4px 4px;
      font-size: .9rem;
      background-color: white;
      border-bottom: 1px solid silver;
    }

    .content {
      display: flex;
      flex-grow: 1;
      align-items: stretch;
      overflow-y: auto;
    }

    .headerlogo {
      display: flex; 
      flex-direction: row;
      align-items: center;
      height: 48px;
      width: 250px;
    }