title: set height of an element relative to the parent element - where parent is part of a flexbox
body: <p>Well considering the following html:</p>
  
  <pre><code>&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;
        (fills remaining space)
      &lt;/p&gt;
      &lt;div class="subcontent"&gt;
      test
      &lt;/div&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;
  </code></pre>
  
  <p>where I wish to set the width of the <code>div</code> <code>subcontent</code> to "50%" of the content div. (thus it flexes also with page size).</p>
  
  <p>The following css "should" do it:</p>
  
  <pre><code>html,
  body {
    height: 100%;
    margin: 0
  }
  
  .box {
    display: flex;
    flex-flow: column;
    height: 100%;
    background-color: grey;
  }
  
  .box .row {
    border: 1px dotted black;
  }
  
  .box .row.header {
    flex: 0 1 auto;
    /* The above is shorthand for:
    flex-grow: 0,
    flex-shrink: 1,
    flex-basis: auto
    */
  }
  
  .box .row.content {
    flex: 1 1 auto;
  }
  
  .box .row.footer {
    flex: 0 1 40px;
  }
  
  .subcontent {
    background-color: blue;
    height: 50%;
    position: absolute;
  
  }
  </code></pre>
  
  <p>however I notice that <code>subcontent</code> is now scaled with the viewport and not the parent div. This is not what I wanted. (Actually I wish to have subcontent exactly 100% of the parent, minus the parent's margin - and those margin I do not know beforehand, they're based on the route and thus based on javascript dynamic page generation).</p>