JSFiddle - React, Tailwind, and code Playground

HTML

<div class="_box-r">
  <div class="_b__header">
    <h1>
      Header
    </h1>
  </div>
  <div class="_b__content">
    <div class="_msgs-content">
      <p>
        First message
      </p>
      <p>
        message
      </p>
      <p>
        message
      </p>
      <p>
        message
      </p>
      <p>
        message
      </p>
      <p>
        message
      </p>
      <p>
        message
      </p>
      <p>
        Last message
      </p>
    </div>
  </div>
  <div class="_b__footer">
    <h5>
      Footer with smaller title
    </h5>
  </div>
</div>

CSS

._box-r {
        width: 50%;
        height: 300px;
        display: flex;
        flex-flow: column;
 }
  ._box-r ._b__header {
    flex: 0 0 auto;
    background: lightBlue;
  }
  ._box-r ._b__content {
    flex: 1 1 auto;
    display: flex;
    //flex-direction: column-reverse;
    background: white;
    overflow-y: scroll; /* or overflow-y: auto */
  }
    ._box-r ._b__content ._msgs-content {
      width: 100%;
    }
  ._box-r ._b__footer {
    flex: 0 0 auto;
    background: yellow;
  }