height:auto;がうまくいかない

Question

###実現したいこと
height:auto;のように、divの中に何かのオブジェクトがあると、その要素に合わせた高さにしたい。
しかし、divのheightを設定しないと表示されなくなってしまいました。

###コード

<div id="wrap">
  <div id="tab1" class="tab">タブ1</div>
  <div id="tab2" class="tab">タブ2</div>
    <div id="tab-container"> #こちらの高さをautoしたい
    <div id="slide" class="">
      <div id="first" class="box">
        <div class="post-box"></div>  #こちらの高さに合わせたい
      </div>
    </div>
    </div>
</div>

#wrap{
  background-color:white;
}

.tab {
    height: 50px;
    width: 50%;
    float: left;
}
#tab-container {
    position: relative;
    width: 100%;
    height: 300px; #こちらの高さを設定しないと消えてしまう。
    overflow: hidden;
    clear: left;
}
.box {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: 100%;
}
.post-box {
  height:100px;　#こちらの高さに合わせたい。
  width:100px;
  background-color:red;
}

もしかしたら簡単なミスや何かが足りないなどがあるのかもしれませんが、ずっと解決できずにおります。
お分かりの方、ぜひご指摘お願いします。

Answer 1

.box {
    display: inline-block;
    white-space: nowrap;
    /*position: absolute;*/
    width: 100%;
}

Comments

[tomtom1]

ありがとうございます！こちら解決しました！
しかし、新たな問題が発生してしまいました。新たに質問を作りましたので、よろしければご指摘お願いします。https://teratail.com/questions/240948?modal=q-comp