Generated by SassMeister.com.

SassMeister-input-HTML.jade

div.wrapper
  article.contents
    header.contents__header
      h1.title title
    div.contents__body
      section
        h3 超長い文章
        div.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;
  width: 420px;
  margin: auto;
  padding: 10px;
  background: #fff;
  
  display: flex;
  -webkit-flex-direction: column;
          flex-direction: column;
  height: 200px;
  
  %fixed-content {
    flex-grow:   0;
    flex-shrink: 0;
    flex-basis: auto;
  }

  &__header {
    @extend %fixed-content;
    height: 40px;
  }
  
  &__body {
    flex-grow:   1;
    flex-shrink: 0;
    flex-basis: auto;
  }
  
  &__action {
    @extend %fixed-content;
    height: 10px;
  }
}

.contents-header > .title {
  
}

.btn-submit {
  
}
.btn-cancel {
  
}

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;
  width: 420px;
  margin: auto;
  padding: 10px;
  background: #fff;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  height: 200px;
}
.contents .contents__header, .contents .contents__action {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
}
.contents__header {
  height: 40px;
}
.contents__body {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}
.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>
        <h3>超長い文章</h3>
        <div class="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>