title: Bulma fullheight layout with scrollable area in middle
body: <p>I want to create a fullheight layout with a top navigation bar, middle area and footer. The Top Navigation and Footer should always stay at the top and bottom, respectively. The layout I managed to create looks somewhat like this:</p>
  
  <p><a href="https://i.stack.imgur.com/NVeQb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/NVeQb.png" alt="Dashboard Layout"></a></p>
  
  <p>I implemented this with:</p>
  
  <pre><code>&lt;section class="hero is-fullheight"&gt;
          &lt;div class="hero-head"&gt;
              &lt;the-navbar&gt;&lt;/the-navbar&gt;
          &lt;/div&gt;
          &lt;div class="hero-body"&gt;
              &lt;div class="container"&gt;
                  &lt;dashboard/&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="hero-foot"&gt;
              &lt;tab-navigation&gt;&lt;/tab-navigation&gt;
          &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>The problem now is that when I have other elements than the <code>&lt;dashboard/&gt;</code> in the hero-body (like a long list of boxes) the fullheight layout is lost, making the site longer than the display height. How can I make the hero-body div scrollable? I tried adding <code>overflow: auto;</code> but that doesn't work</p>