JSFiddle - React, Tailwind, and code Playground

by lborgman

HTML

<div id="flex">
  <div id="hd">header</div>
  <div id="outer">
    <div id="inner">
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
      a log of text goes here
    </div>
  </div>
</div>

CSS

#flex {
    display: flex;
    flex-direction: column;
    align-content: stretch;
    width: 200px;
    height: 200px;
}
#hd {
    flex:0 0 auto;
    background: yellow;
}
#outer {
    flex: 1;
    background: #cf0;
    padding: 10px;
    overflow-y: auto;
}
#inner {
    overflow-y: hidden;
    background: orange;
}