How Muse-UI 's Layout makes div height cover the rest of the screen

as shown in the figure
how does the Layout Flexbox of Muse-UI fill the rest of the screen with the 2 between the two navigation bars?
I know how to implement the native Flex Box, but I can"t understand the method in the Muse-ui document and can"t use it. Ask for advice

  <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>
Mar.25,2021

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

.content{
  flex: 1
}
</style>
<div style="width: 100%; background: -sharpfff; 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>
Menu