css でheight autoについて

Question

ボタンをクリックしたら出現するdivを設定したいのですが，
以下の画像のように出現したときに親要素のheightがautoの場合伸びてしまいます．しかし，親要素の内容が増減するので可変にしたいためheight:auto;がいいです．

Q.このdiv-a-aを出現させたときに親要素の高さを変えないままにすることはできるでしょうか？

⇓

<div id ="root" class="root">
  <div class="child">
    <div class="gchild">
      <div class="div-a">
        <p>タイトル</p>
        <button @click="open">open</button>
        <div class="div-a-a" v-if="isOpen">
          div-a-a
        </div>
      </div>
    </div>
  </div>
</div>

.root{
  height: auto;
  width: 200px;
  background:#ff9000;
}
.div-a-a{
  height: 300px;
  width: 100px;
  background: #0090ff;
}

new Vue({
  el:"#root",
  data:{
    isOpen: false
  },
  methods:{
    open(){
      this.isOpen=true;
    }
  }
});

Answer 1

.div-a-a{
  height: 300px;
  width: 100px;
  background: #0090ff;
  position: absolute; /* 追加 */
}

とするとどうですか？

Comments

[mermer]

ありがとうございます！できました！