<div class="phone">

  <div class="main-wrap">
    <div class="main-wrap-top">
      <div class="main-wrap-header">
        <div class="title">
          title
        </div>
        <div class="subtitle">
          subtitle
        </div>
      </div>
        
      <div class="items">
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description</div>
        </div>
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description</div>
        </div>
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description</div>
          <div class="item-desc">item description</div>
          <div class="item-desc">item description</div>
          <div class="item-desc">item description</div>
          <div class="item-desc">item description</div>
          <div class="item-desc">item description</div>
          <div class="item-desc">item description</div>
          <div class="item-desc">item description</div>
        </div>
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description</div>
        </div>
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description</div>
        </div>
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description</div>
        </div>
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description</div>
        </div>
        <div class="item">
          <div class="item-title">item title</div>
          <div class="item-desc">item description END</div>
        </div>
      </div>
      <div class="main-wrap-footer">
        footer
      </div>
      
    </div>
    <div class="main-wrap-bottom">
      <button>button</button>
    </div>
  </div>
  
  
  
  
  <div class="content">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi expedita voluptates culpa quidem nulla minima excepturi quo, provident optio recusandae ea eum ducimus reiciendis similique totam consequuntur doloribus repellat!
      </p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi expedita voluptates culpa quidem nulla minima excepturi quo, provident optio recusandae ea eum ducimus reiciendis similique totam consequuntur doloribus repellat!
      </p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi expedita voluptates culpa quidem nulla minima excepturi quo, provident optio recusandae ea eum ducimus reiciendis similique totam consequuntur doloribus repellat!
      </p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi expedita voluptates culpa quidem nulla minima excepturi quo, provident optio recusandae ea eum ducimus reiciendis similique totam consequuntur doloribus repellat!
      </p>
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit modi expedita voluptates culpa quidem nulla minima excepturi quo, provident optio recusandae ea eum ducimus reiciendis similique totam consequuntur doloribus repellat!
      </p>
  </div>
</div>

.phone {
  width: 360px;
  height: 680px;
  margin: 50px auto 0;
  border: solid 10px #000;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.content
{
  font-size: 20px;
  padding: 20px;
}

.main-wrap
{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 2;
  
  max-height: 80%;
  
  &-top
  {
    background: #eee;
    padding: 20px 20px 0;
  }
  
  &-bottom
  {
    background: #eee;
    padding: 20px;
    
    button
    {
      width: 100%;
      padding: 10px 0;
    }
  }
  
  &-header,
  &-footer
  {
    border: solid 1px #999;
    padding: 10px;
  }
}

.items
{
  overflow-y: auto;
  max-height: 400px;
}

.item
{
  border: 1px solid red  ;
  padding: 10px;
}