在vue中使组件自适应div大小

在Vue中，可以使用CSS的flex布局来实现组件自适应div大小。具体做法如下：

1. 在父组件的样式中设置display: flex，让子组件可以使用flex布局。

2. 在父组件的样式中设置height: 100%和width: 100%，让父组件的大小自适应其父元素。

3. 在子组件的样式中设置flex: 1，让子组件占据剩余的空间。

这样，无论父组件的大小如何改变，子组件都会自适应父组件的大小。

例如：

<template>
  <div class="parent">
    <child-component></child-component>
  </div>
</template>

<style>
.parent {
  display: flex;
  height: 100%;
  width: 100%;
}

.child-component {
  flex: 1;
}
</style>