使用布尔玛使中间的div填充剩余空间并滚动

Question

我已经开始使用布尔玛 0.7.1。

现在，我正在尝试设计一个类似于IDE的模板，即中间有固定的导航栏，边距和页脚以及可滚动的模板。我在制作应填充可见空间并在必要时滚动的容器时遇到一些问题。

我尝试应用自定义CSS类

.vscrollable {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}

到应滚动的容器

我已经在Codepen中完成了this的操作，并在此进行了简单介绍。 HTML部分是：

<section class="section">
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-start">
       <a class="navbar-item">Home</a>
       <a class="navbar-item">Bla1</a>
       <a class="navbar-item">Bla2</a>
    </div>
  </nav>
</section>
<div class="columns">
  <aside class="column is-3 has-background-warning">
    <div class="panel vscrollable">
       I have some special content that
  Very special. I should be scrollable vertically
  and horizontallyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
      <h1>bla</h1>
      <h1>bla</h1>
      <h1>bla</h1>
      <h1>bla</h1>
      <h1>bla</h1>
    </div>          
  </aside>
  <section class="column">
  <!-- This will contain another navbar and the scrollable container -->
      <nav class="navbar has-background-link">
        <div class="navbar-start">
           <a class="navbar-item">Yet another link</a>
           <a class="navbar-item">And another</a>
           <a class="navbar-item">And another one</a>
        </div>
      </nav>
      <section class="section">
        <div class="container vscrollable">
          <p>This should be scrollable vertically and horizontally and fill the available space</p>
                <h1>blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablaneverendingtextblablablablablabla</h1>
                <h1>bla</h1>
                <h1>bla</h1>
                <h1>bla</h1>
                <h1>bla</h1>
        </div>          
      </section>  
  </section>
</div>
<footer class="footer has-background-danger">
  <div class="content has-text-centered">
    <p>
      This is a footer. it contains nice stuff
    </p>
  </div>
</footer>

我想找到一种基于布尔玛css类的解决方案，但是基于css3或更少的定制解决方案也是可以的。