親div(wrap)を、子要素(box)の高さに合わせたい

やりたいこと

子要素「box」の高さを変えると、親要素「wrap」の高さも自動的に変わるようにしたい。

wrap（ box, 他の要素）
↑親　　　↑子↑

この「box」の高さに合わせる（boxが一番高い）

試したこと

こちらの「親要素にoverflow: hidden;」をやったら、親も子も消えてしまいました。
色々調べても、これといったものがなかった。

現状

html
1<div id="wrap">
2 <div class="box"></div>
3 <div id="hokayouso">
4  <section>
5  ~
6  </section>
7 </div>
8</div>

css
1#wrap {
2  position: relative;
3  width: 100%;
4  height: ?
5  margin: 0 auto;
6}
7 .box {
8  position: absolute;
9  display: block;
10  width: 430px;
11  height: 430px;
12  left: 0;
13  right: 0;
14  margin: auto;
15　background: #e2e2e2;
16 }
17
18 #hokayouso {
19~
20}

補足

子の「box」は、CSSで作ってて、floatとかもしてません。
効果は、absoluteで左右中央配置してるだけです。

よろしくお願いします。

kei344

2019/02/09 04:48

書かれている状況が再現するコード（HTML/CSS/JavaScriptなど）を提示されたほうが回答を得やすいと思います。

azuapricot

2019/02/09 05:16

現状のコードをご提示ください

Lhankor_Mhy

2019/02/09 06:09

ご質問が「absolute 配置した子要素たちの最大の成り行き高さに、親要素の高さを合わせたい」ということであれば、CSSだけでは難しいかと思います。JavaScriptの使用を検討してください。

think49

2019/02/09 08:37

position: absolute は他の要素の影響を受けずに配置する事に意味があるので、親要素に影響させたいのなら、設計方針を見直した方が良いかもしれません。

EXIT

2019/02/09 15:36

皆さんありがとうございます\( ˆoˆ )/

行動規範の内容に同意します

回答2件

ベストアンサー

成り行きではなくて固定値のようなので、CSS Variables を使うといいかもですね。

css
1#wrap {
2  --box-height: 430px;
3  position: relative;
4  width: 100%;
5  height: var(--box-height);
6  margin: 0 auto;
7  overflow: hidden;
8}
9 .box {
10  position: absolute;
11  display: block;
12  width: 430px;
13  height: var(--box-height);
14  left: 0;
15  right: 0;
16  margin: auto;
17　background: #e2e2e2;
18 }
19
20 #hokayouso {
21~
22}