title: Combining flex with position:fixed
body: <p>I want to show a modal dialog but I am struggling with the combination of a flex layout and the dialog with a fixed positioning. The header and footer need to be fixed in height; the content section has an overflow with scrollbars. Reason why I chose the flex layout here is that the header could be hidden or vary in height, in that case I want the content to take all the available height.</p>
  
  <p>What happens though, if I have the modal dialog with a position:relative (md-modal) everything works perfect. </p>
  
  <p>Once I change to position:fixed on md-modal everything breaks. I am not seeing the root cause of what is causing this. Am I hitting a specification issue here?</p>
  
  <p>I enclosed the situation in a 600/400 wrapper just for visibility.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt;
  html,
  body {
    height: 100%;
    margin: 0
  }
  
  .md-modal {
      position: fixed;
      top: 50%;
      left: 50%;
      width: auto;
      height: auto;
      border:1px solid green;
      z-index: 2000;
      visibility: hidden;
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      backface-visibility: hidden;
  
      -webkit-transform: translateX(-50%) translateY(-50%);
      -moz-transform: translateX(-50%) translateY(-50%);
      -ms-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
  
  }
  .md-show {
      visibility: visible;
  }
  .md-content {
      position: relative;
      color: #000;
      background: #fff;
      border-radius: 3px;
      margin: 0 auto;
  }
  .md-effect-1 .md-content {
      -webkit-transform: scale(0.7);
      -moz-transform: scale(0.7);
      -ms-transform: scale(0.7);
      transform: scale(0.7);
      opacity: 0.2;
      -webkit-transition: all 0.3s;
      -moz-transition: all 0.3s;
      transition: all 0.3s;
  }
  
  .md-show.md-effect-1 .md-content {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      transform: scale(1);
      opacity: 1;
  }
  
  .box {
    display: flex;
    flex-flow: column;
    height: 100%;
  }
  
  .box .row {
    border: 1px dotted grey;
  }
  
  .box .row.header {
    flex: 0 1 auto;
  }
  
  .box .row.content {
    flex: 1 1 auto;
    overflow-y:auto;
  }
  
  .box .row.footer {
    flex: 0 1 40px;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;a href="javascript:document.getElementById('dialog').classList.add('md-show')"&gt;test&lt;/a&gt;
  
  &lt;div style="width:600px;height:400px"&gt;
  &lt;div class="md-modal md-effect-1 center" id="dialog"&gt;
      &lt;div class="md-content"&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;p&gt;
                &lt;b&gt;content&lt;/b&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;
                &lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&gt;&lt;p&gt;line&lt;/p&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;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>