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