SOURCE

<div class="container">
  <div class="header">Title</div>
  <div class="body">
    <div class="item"></div>
    <div class="sticky-item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item" style="display: flex">
      <div>内容标题等等：</div>
      <div style="margin-left:8px;flex: 1;width:0">真的很长真的很长真的很长很长真的很长真的很长真的很长真的很长

          <div class="">4</div>
      </div>
    </div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <div class="footer">Footer</div>
</div>

   html, body {
      margin: 0;
      padding: 0;
    }
    .container {
      position: absolute;
      top:0;
      bottom: 0;
      left:0;
      right: 0;
      display: flex;
      flex-direction: column;
    }
    .body {
      background-color: #eee;
      flex-grow: 1;
      overflow: auto;
      height:0;
    }
    .header,.footer {
      height:50px;
      line-height: 50px;
      background-color:#7fdbda;
      text-align: center;
      flex-grow: 0;
    }
    .item {
      height:50px;
      background-color: #ade498;
    }
    .sticky-item{
      height:50px;
      background-color: yellow;
      position: sticky;
      top:0;
    }