Как заставить flex пересчитать после уменьшения его содержимого?

Question

У меня есть div с атрибутом flex, и я динамически уменьшаю его содержимое с помощью 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 к содержимому.