JSFiddle - React, Tailwind, and code Playground

HTML

<header class="header">Header</header>
<main class="main">
  <div class="content">
  <div class="container"><div class="container-in">
    <div class="item">1</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
    <div class="item">8</div>
    <div class="item">9</div>
    <div class="item">10</div>
    
  </div></div>
  </div>
  <aside class="left"></aside>
  <aside class="right"></aside>
</main>

SCSS

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

.header {
  height: 60px;
  padding: 15px;
  background-color: #eee;
  margin-bottom: 15px;
}

.header,
.main {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.main {
  display: flex;
  min-height: 200px;
  
  > .content {
    padding: 0 15px;
    order:2;
    flex: auto;
    border-width: 0 1px;
    border-style: solid;
    max-width: calc(100% - 360px);
  }
  
  > .left {
    width: 120px;
    min-width: 120px;
    order: 1;
    background-color: #eee;
  }
  
  > .right {
    width: 240px;
    min-width: 240px;
    order: 3;
    background-color: #eee;
  }
}

.container {
  border: 1px solid;
  overflow: auto;
  
  &-in {
    display: flex;
    flex-wrap: nowrap;
    
    .item {
      min-width: 100px;
      min-height: 100px;
     //padding: 15px;
      font-size: 25px;
      line-height: 100px;
      text-align: center;
      
    }
  }
}