Generated by SassMeister.com.

SassMeister-input-HTML.jade

div.wrapper
  article.contents
    header.contents__header
      h1.title title
    div.contents__body
      section.section
        h3.section__title 超長い文章
        div.section__body.iscroll-content
          div.scroller
            p ぶんしょう
    div.contents__action
      button.btn-submit(type="button") キャンセル
      button.btn-cancel(type="button") 決定

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}
 
// layouts
.wrapper {
  position: fixed;
  top:    0;
  bottom: 0;
  left:   0;
  right:  0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
 
.contents {
  position: absolute;
  top: 10px;
  left:  0;
  right: 0;
  margin: auto;
  padding: 10px;
  background: #fff;
  
  // 大事なのここから
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  width: 420px;
  height: 200px;
  
  %fixed-content {
    flex-grow:   0;
    flex-shrink: 0;
    flex-basis: auto;
  }
 
  &__header {
    @extend %fixed-content;
    height: 40px;
  }
  
  &__body {
    position: relative;
    flex-grow:   1;
    flex-shrink: 0;
    flex-basis: auto;
    
    $_body-header-height: 20px;
    
    .section {
      position: absolute;
      width:  100%;
      height: 100%;
      padding-top: $_body-header-height;
      
      &__title {
        position: relative;
        top: -$_body-header-height;
        height: $_body-header-height;
      }
      
      .iscroll-content {
        position: relative;
        top: -$_body-header-height;
        height: 100%;
        width:  100%;
        background: rgba(255, 0, 0, 0.1);
      }
    }
  }
  
  &__action {
    @extend %fixed-content;
    height: 10px;
  }
}

SassMeister-output.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
}

.wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}

.contents {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  margin: auto;
  padding: 10px;
  background: #fff;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  width: 420px;
  height: 200px;
}
.contents .contents__header, .contents .contents__action {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
.contents__header {
  height: 40px;
}
.contents__body {
  position: relative;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
.contents__body .section {
  position: absolute;
  width: 100%;
  height: 100%;
  padding-top: 20px;
}
.contents__body .section__title {
  position: relative;
  top: -20px;
  height: 20px;
}
.contents__body .section .iscroll-content {
  position: relative;
  top: -20px;
  height: 100%;
  width: 100%;
  background: rgba(255, 0, 0, 0.1);
}
.contents__action {
  height: 10px;
}

SassMeister-rendered.html

<div class="wrapper">
  <article class="contents">
    <header class="contents__header">
      <h1 class="title">title</h1>
    </header>
    <div class="contents__body">
      <section class="section">
        <h3 class="section__title">超長い文章</h3>
        <div class="section__body iscroll-content">
          <div class="scroller">
            <p>ぶんしょう</p>
          </div>
        </div>
      </section>
    </div>
    <div class="contents__action">
      <button type="button" class="btn-submit">キャンセル</button>
      <button type="button" class="btn-cancel">決定</button>
    </div>
  </article>
</div>