D3 Examples - Experiment for flexbox table bottom of page JS Bin// source https://jsbin.com/luwodin

xxxxxxxxxx
 
<!DOCTYPE html>
<html class="h-100">
<head>
<meta name="description">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css"/>
<style id="jsbin-css">
.fsh-1, .fsh-2 {
  height: 30px;
}
​
.grow-1 {
  flex-grow: 1;
}
​
.overflow-y-auto {
  overflow-y: auto;
}
</style>
</head>
<body class="h-50">
  <div class="ba h-100 flex flex-column">
    <div class="fsh-1 ba b--light-purple">
    </div>
    <div class="grow-1 flex flex-column">
      <div class="fsh-2 ba b--hot-pink">
      </div>
      <div class="ba b--orange grow-1 overflow-y-auto">
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
         fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
        fdaskdfsajkfdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk fdaskdfsajk
      </div>
    </div>
  </div>
​
​
<script id="jsbin-source-css" type="text/css">.fsh-1, .fsh-2 {
  height: 30px;
}
​
.grow-1 {
  flex-grow: 1;
}
​
.overflow-y-auto {
  overflow-y: auto;
}</script>
</body>
</html>
    