JSFiddle - React, Tailwind, and code Playground

by AlexandrAbakumov

HTML

<div class="cntnr-top">
  <div class="cntnr-one-more">
    <div class="cntnr-side-nav">Menu</div>

    <div class="cntnr-limited-width">
      <div class="cntnr-scroll-holder">
          <div class="wide-content">
              TestStart|Test|Test|Test|Test|Test|Test|Test|Test|Test|Test|Test|Test|Test|TestEnd
          </div>
      </div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.cntnr-top {
  color: white;
  display: flex;
  width: 100%;
}

.cntnr-one-more {
  display: flex;  
  width: 100%;
}

.cntnr-side-nav{
    background-color: green;
    flex: 0 0 80px;
}

.cntnr-limited-width {
    background-color: pink;
    display: flex;
    flex: 1 1 1e-09px;
    overflow-x: hidden;
    padding: 15px;
    /*width: 80%;*/
}

.cntnr-scroll-holder {
    background-color: blue;
    display: flex;
    flex: 1 1 0;
    overflow-x: auto;
    overflow-y: hidden;
}

.wide-content {
    flex-grow: 1;
}