JSFiddle - React, Tailwind, and code Playground

by Tsuneo Yoshioka

HTML

<div class="container">
  <div class="header">
    Header...
  </div>
  <div class="main">
    <div class="messagelist-wrapper">
      <div class="messagelist">
        messagelist<br/>
        0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>
      </div>
    </div>
    <div class="messagebody">
       messagebody
        0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>0123456789<br/>
        <div class="sticky">
          Sticky
        </div>
    </div>
  </div>
</div>

CSS

html{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  background-color: green;
}
.main{
  background-color: grey;
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  position: relative;
  overflow: hidden;
}

.messagelist-wrapper{
  position: relative;
  height: 100%;
  overflow: hidden;
}
.messagelist{
  background-color: yellow;
  height: 100%;
  overflow-y: scroll;
}
.messageheader{
  background-color: blue;
}
.messagebody{
  flex-grow: 1;
  background-color: blue;
  height: 100%;
  overflow-y: scroll;
}
.sticky{
  position: sticky;
  bottom: 0;
  background-color: red;
}