title: How to fix height the content inside a div with flex css
body: <p>Following to <a href="https://stackoverflow.com/a/24979148/275097">this</a> answer, I am trying to create a perfect height for my content, But the content height is overflowing instead of getting a scroll over content. 
  I have created a fiddle for this scenario. Please help me fix my content height such a way that top content and always visible and scroll-able downward.</p>
  
  <p><a href="https://jsfiddle.net/vsd_codesode/899ws4uk/" rel="nofollow noreferrer">fiddle</a></p>
  
  <pre><code>html,
  body {
      height: 100%;
      margin: 0
  }
  
  .box {
      display: flex;
      flex-flow: column;
      height: 100%;
  }
  
  .box .row {
      border: 1px dotted grey;
  }
  
  .box .row.header {
      flex: 0 1 auto;
  }
  
  .box .row.content {
      display: flex;
      flex-flow: column;
      flex: 1 1 auto;
      overflow-y: auto;
      justify-content: center;
      align-items: center;
  }
  
  .data {
      width: 80%;
      min-height: 400px;
  }
  
  .box .row.footer {
      flex: 0 1 40px;
  }
  </code></pre>
  
  <p>HTML.</p>
  
  <p>
      </p>
  
  <pre><code>&lt;head&gt;
      &lt;link href="./test.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="box"&gt;
          &lt;div class="row header"&gt;
              &lt;p&gt;
                  &lt;b&gt;header&lt;/b&gt;
                  &lt;br /&gt;
                  &lt;br /&gt;(sized to content)&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="row content"&gt;
              &lt;div class="data"&gt;
                  invisible box1
              &lt;/div&gt;
              &lt;div class="data"&gt;
                  visible box2
              &lt;/div&gt;
              &lt;div class="data"&gt;
                  visible box3
              &lt;/div&gt;
              &lt;p&gt;
                  &lt;b&gt;Bottom Box is visible with scroll.&lt;/b&gt; (fills remaining space)
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="row footer"&gt;
              &lt;p&gt;
                  &lt;b&gt;footer&lt;/b&gt; (fixed height)&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>