Muse-UI的Layout如何让div高度铺满剩下的屏幕

Question

如图
Muse-UI的Layout Flexbox 如何让两个导航栏中间的2铺满剩下的屏幕？
原生的Flex Box我知道怎么实现，但Muse-ui的那个文档里的方法我看不懂，不会用？求教

  <div id="app">
      <mu-appbar style="width: 100%;" title="Title"></mu-appbar>
      <mu-flex class="box" diretion="column" fill align-content="center">
        <div>2</div>
      </mu-flex>
    <!--<div class="a">3</div>-->
      <mu-container>
        <mu-bottom-nav>
          <mu-bottom-nav-item title="Recents" icon="restore"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Favorites" icon="favorite"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Nearby" icon="location_on"></mu-bottom-nav-item>
        </mu-bottom-nav>
      </mu-container>

Answer 1

<style>
.is-full-width{
  width: 100%;
}

.content{
  flex: 1
}
</style>
<div style="width: 100%; background: #fff; padding: 8px;">
  <mu-flex direction="column" style="width: 100%;height: 100vh;">
    
    <mu-flex class="is-full-width">
      <mu-appbar  class="is-full-width" title="Title"></mu-appbar>
    </mu-flex>
    <mu-flex class="is-full-width" fill>
    </mu-flex>
    <!--<div class="a">3</div>-->
    <mu-flex  class="is-full-width" >
      <mu-container>
        <mu-bottom-nav>
          <mu-bottom-nav-item title="Recents" icon="restore"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Favorites" icon="favorite"></mu-bottom-nav-item>
          <mu-bottom-nav-item title="Nearby" icon="location_on"></mu-bottom-nav-item>
        </mu-bottom-nav>
      </mu-container>
      </mu-flex>
  </mu-flex>
  
</div>
</div>