flex:1是啥意思

image.png

源码：
父组件

<script src="../../router/index.js"></script>
<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      return this.$store.state.tagsView.cachedViews
    },
    key() {
      return this.$route.path
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main {
  /* 50= navbar  50  */
  /*min-height: calc(100vh - 50px);*/
  height: calc(100vh - 84px);
  width: 100%;
  position: relative;
  display: flex;
  /*overflow: hidden;*/
}
</style>

子组件：

<template>
  <div class="container">
    <div>
      <el-button @click="click" style="margin-left: 5px">全屏</el-button>
    </div>
    <div class="main">
      <iframe
        id="frame"
        src="http://localhost:50401/analysis/dashboard/show/05cd39547179a1a1b489/" frameborder="no"
        class="frameStyle"
        name="frameName"
        allowFullScreen
        scrolling="yes"></iframe>
    </div>
  </div>
</template>

<script>
  import screenfull from 'screenfull'

  export default {
    name: 'PagePermission',
    data() {
      return {
        isFullscreen: false
      }
    },
    mounted() {
      console.log(this.$parent)
      this.init()
    },
    methods: {
      click() {
        debugger
        const element = document.getElementById('frame')
        if (!screenfull.enabled) {
          this.$message({
            message: 'you browser can not work',
            type: 'warning'
          })
          return false
        }
        screenfull.toggle(element)
      },
      change() {
        this.isFullscreen = screenfull.isFullscreen
      },
      init() {
        if (screenfull.enabled) {
          screenfull.on('change', this.change)
        }
      },
      destroy() {
        if (screenfull.enabled) {
          screenfull.off('change', this.change)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container{
    /*height: 100%;*/
    flex: 1;
    display: flex;
    flex-direction: column;
    .main{
      /*flex: 1;*/
      height: 100%;
      overflow-y: auto;
      .frameStyle{
        height: 100%;
        width: 100%;
      }
    }
    /*.main{*/
    /*  flex: 1;*/
    /*  background-color: red;*/
    /*  .frameStyle {*/
    /*    height: 90px;*/
    /*    width: 1680px;*/
    /*    margin-top: 5px;*/
    /*    margin-left: 5px;*/
    /*    overflow: Scroll;*/
    /*    overflow-y: hidden;*/
    /*    overflow-x: hidden*/
    /*  }*/
    /*}*/
  }

</style>

使用flex:1和height:100都会使得子组件将父组件的剩余空间占满，但是前提父组件开启flex布局，也就是有display:flex
https://www.cnblogs.com/LangZ-/p/12703858.html