Take children with 'position: absolute;' into account

[alxppp]

Is it possible to also account for the height of children with position: absolute? Right now their height is ignored.

[alxppp]

This is how I do it right now:

<template lang="pug">
div(ref="container", :style="{ height: height }")
  slot

</template>

<script>
export default {
  name: 'autoheight',
  data() {
    return {
      height: 'auto',
    };
  },
  computed: {
    computedHeight() {
      return this.height;
    },
  },
  methods: {
    maxChildHeight() {
      const children = this.$refs.container.children;
      return Math.max(Array.from(children).map(c => c.clientHeight));
    },
    updateHeight() {
      const container = window.getComputedStyle(this.$refs.container, null);
      const padding = parseFloat(container.getPropertyValue('padding-top')) +
          parseFloat(container.getPropertyValue('padding-bottom'));
      this.height = `${this.maxChildHeight() + padding}px`;
    },
  },
  mounted() {
    this.updateHeight();
    window.addEventListener('resize', this.updateHeight);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateHeight);
  },
};
</script>

[guanzo]

I'm hesitant to add it as default functionality, perhaps the checks can be enabled through a boolean option? Something like

this.$registerSmoothElement({
    el: this.$refs.container,
    containsAbsolute: true
})

Another cause for concern is that your code only checks the containers direct children. It obviously suits your needs but absolutely positioned children could be at arbitrary levels of nesting. Tell me your thoughts and I can get started on this.