title: Sticky footer in vuejs application
body: <p>I'm struggling with making a sticky footer work in my vuejs application.</p>
  
  <p>vuejs and other framework like it, require that a root element be present in the template. </p>
  
  <p>But this is making it difficult to use Flex to add a sticky footer. </p>
  
  <p>without the root element:</p>
  
  <pre><code>&lt;div class="content"&gt;
    &lt;h1&gt;Sticky Footer with Flexbox&lt;/h1&gt;
    &lt;p&gt;
      &lt;button id="add"&gt;Add Content&lt;/button&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;footer class="footer"&gt;
    Footer
  &lt;/footer&gt;
  </code></pre>
  
  <p>everything works for, but with the root element, it doesn't. </p>
  
  <pre><code>&lt;div&gt;
    &lt;div class="content"&gt;
      &lt;h1&gt;Sticky Footer with Flexbox&lt;/h1&gt;
      &lt;p&gt;
        &lt;button id="add"&gt;Add Content&lt;/button&gt;
      &lt;/p&gt;
    &lt;/div&gt;
  
    &lt;footer class="footer"&gt;
      Footer
    &lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Since removing the root element is not an option, please how can I update the css to work with the root element?</p>
  
  <p><a href="https://jsfiddle.net/capiono/Low3fbs1/2/" rel="nofollow noreferrer">JsFiddle</a></p>