【CSS】position:absoluteのdiv要素の高さを期待通りに動作させる方法

.box2{
  position: relative;
}
.box2:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.box2-inner {
  position: absolute;
  top: 0;
  left: 0;
}

「.box2-inner」がposition:absoluteのdivのクラス名です。その外側に、「.box2」のdivを作成します。

参考：
・position:absoluteした要素に可変の高さを与える - Qiita
・【CSS】position:absolute な BOX の高さ | HHH@venture | @venture = Adventure!

補足

子要素全てがposition:absolute;（またはfixed）を指定された場合には高さがゼロになってしまいます。
CSS:難しい？意外と便利なpositionを使いこなそう | ホームページ更新倶楽部｜お気軽にサイト修正