在缩小其内容后如何使flex重新计算？

Question

我有一个带flex属性的div，并且正在使用Vue动态缩小其内容。但是，父div的高度仍保持原来的高度。

<template>
    <div style="width: 100%; overflow: hidden; display: flex; flex: 1 1 auto;">
        <slot ref="target" :scale="scale"></slot>
    </div>
</template>

<script>
    export default {
      data () {
        return {
          scale: 1,
          initialWidth: null
        }
      },

      mounted () {
        this.calculateScale()

        let vm = this
        this.$nextTick(function () {
          window.addEventListener('resize', vm.calculateScale);
        })
      },

      methods: {
        calculateScale () {
          let content = $(this.$el).children()[0]

          if (!this.initialWidth) {
            this.initialWidth = $(content).width()
          }

          let containerWidth = $(this.$el).width()

          console.log(containerWidth + ' ' + this.initialWidth)

          this.scale = containerWidth / this.initialWidth
        },
      }
    }
</script>

然后使用如下代码：

<scale v-if="event.last_action_type === 'ad'">
  <ad-preview slot-scope="{ scale }" :style="'transform: scale(' + scale + '); transform-origin: top left;'" :ad="event.last_action"></ad-preview>
</scale>

我正在尝试使div容器适合内容。