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>