JSFiddle - React, Tailwind, and code Playground

by Munsta0

HTML

<div id="container">
  <div id="a">
    Lorem Ipsum
  </div>
  <div id="contentContainer">
    <div id="content">
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
      <div>This is a line</div>
    </div>
  </div>
  <div id="c">
    <div id="ca">
      <input />
    </div>
    <div id="cb">
      <input type="button" value="Click me!" />
    </div>
  </div>
</div>

CSS

#container {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 400px;
  display: flex;
  flex-flow: column;
  height: 100%;
  background-color: green;
}

#a {
  background-color: blue;
  flex: 0 1 30px; //Sized to 30px
}

#contentContainer {
  background-color: red;
  flex: 1 1 auto; //Rest of space
  overflow-y: scroll
  
  display: flex;
  overflow: auto;
}

#content{
  min-height: -webkit-min-content;
  display: flex;
  flex-flow: column;
}

#c {
  background-color: purple;
  display: flex;
  flex: 0 1 auto; //Sized to content
}

#ca {
  flex: 1 1 auto; //Rest of space
}

#ca input {
  width: 100%;
}

#cb {
  flex: 0 1 auto; //Sized to content
}