title: css fill remaining height, only when children require
body: <p>I have a content and a footer panel. Footer has fixed size, but content can be either fixed or fill remaining height, depending on (grand)child elements. If any child fills remaining height, then the content panel should also fill remaining height.
  The depth of such filling childs can be any (immediate childs or 10 nested levels)</p>
  
  <p>Example:
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var button = document.getElementById('child-switcher');
  var child = document.getElementById('content-filler');
  button.onclick = function() {
   if (child.style.display === 'none') {
     child.style.display = null;
    } else {
     child.style.display = 'none';
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#main {
    height: 300px;
    display: flex;
    flex-direction: column;
  }
  
  #footer {
    background-color: green;
  }
  
  #content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  #some-nested-content {
    display: flex;
    flex: 1;
    flex-direction: column;
  }
  
  #content-filler {
    flex: 1;
    background-color: red;
  }
  
  #content-header,
  #content-footer {
    background-color: yellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main"&gt;
  &lt;button id="child-switcher"&gt;
    Hide/show the child
  &lt;/button&gt;
  &lt;div id="content"&gt;
    &lt;div id="some-nested-content"&gt;
      &lt;div id="content-header"&gt;
        CONTENT_HEADER
      &lt;/div&gt;
      &lt;div id="content-filler"&gt;
        FILLING REMAINING HEIGHT
      &lt;/div&gt;
      &lt;div id="content-footer"&gt;
        CONTENT_FOOTER
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footer"&gt;FOOTER&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>In the example, if you press a button, FOOTER stays at the bottom, but it  <strong>should</strong> go up.</p>
  
  <p>PS using flexbox is not a requirement, it can be any layout, which will allow to achieve desired result.</p>