flex-within-flex

by Jernej Slejko

HTML

<div class="page">
  <div class="page-header">Header</div>
  <div class="page-content">  
    <div class="page" style="background-color: #e8e8e8;">
      <div class="mdl-grid">
        <div class="col-5">
          <div class="card">
            left
          </div>
        </div>
        <div class="col-7">
          <div class="card">
            right
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="page-footer">Footer</div>
</div>

SCSS

.mdl-grid {
  display: flex;
  flex-flow: row wrap;
  padding: 8px;
}
.col-5 {
  padding: 8px;
  width: calc(41.6666666667% - 16px);
}
.col-7 {
  padding: 8px;
  width: calc(58.3333333333% - 16px);
}
.card {
  position: relative;
background: rgb(255,210,255);
border-radius: 2px;
box-sizing: border-box;
}
html,
body,
.page {
  margin: 0;
  height: 100%; /* needed for proper layout */
}

.page {
  display: flex;
  flex-direction: column;
}

.page-header {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}

.page-content {
  flex: 1 1 auto;
  position: relative;/* need this to position inner content */
  overflow-y: auto;
}

.page-footer {
  flex: 0 0 auto;
  background-color: #dcdcdc;
}