要素の高さを中のフロートした子要素の高さに合わせたい

Question

###実現したいこと
タブを押すと横にスライドするアニメーション作りました。
しかしその実装で要素に対し、position: absolute;を使ってしまったため、中の子要素がフロートしてしまい、要素の高さが 0 になってしまいます。
要素にheightで高さを指定すれば済むのですが、
そうではなくheightをフロートした子要素に合わせたいです。

<div id="wrap">
  <div id="tab1" class="tab selected">Tab 1</div>
  <div id="tab2" class="tab">Tab 2</div>

  <div id="container">
    <div id="slide" class="">
      <div id="first" class="box">1タブ内容</div>
      <div id="second" class="box">２タブ内容</div>
    </div>
  </div>
</div>

.tab {
    height: 40px;
    width: 100px;
}

.selected {
    background-color: black;
}

#container {
    position: relative;
    overflow: hidden;
    clear: left;
}

.box {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    width: 400px;
    height: 200px;
}

#first {
    top: 0px;
    left: 0px;
}

#second {
    top: 0px;
    left: 400px;
}

#slide {
    transition: transform 1s ease-in-out 0s;
    -moz-transition: -moz-transform 1s ease-in-out 0s;
    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
}
.move-to-first {
    transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);    
}
.move-to-second {
    transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -webkit-transform: translateX(-400px);
}

お分かりの方、ぜひご教示宜しくお願いします。
###追記
hatena19さんにご教示頂き、非常に答えに近くことができました。ありがとうございます。
さて、子要素の高さに合わせたい理由から、.boxのheight:0;に変更しました。
すると、要素がないため、boxが消す（高さが0になった）ことができました。
そこで、タブ1boxにハコを1つ、タブ2boxにハコを2つ、子要素を加えて確かめました。

<div id="first" class="box">
  <div class="box-red"></div>
 </div>
 <div id="second" class="box">
  <div class="box-blue"></div>
  <div class="box-blue"></div>
</div>

.box-red{
  width:100px;
  height:100px;
  background-color:red;
}
.box-blue{
  width:100px;
  height:100px;
  background-color:blue;
}

すると、高さが子要素に合わせて設定されるのですが、要素が左下詰めに配置されてしまいます。
当初存在した.boxにheight:200px;を指定すると、赤い箱はちゃんと左上に配置されました。
高さを完全に子要素に設定（子要素がない場合は高さ0）しつつ、箱を左上（通常の配置先）に置くには何が足りないでしょうか
※タブのcssを少々変えています。
※boxなどのwidth:400px; と指定された要素の全てをwidht:100%;に変えております。

Comments

[s8_chu]

動作確認を行ったところ、タブの移動が再現出来ないように見受けられますが、当該コードのみで問題点は再現出来ますか？

[tomtom1]

ご質問ありがとうございます！下記hatena19のご回答頂いた通り、上記ではjsが抜けておりました。申し訳ありません！

Answer 1

HTML と CSS を見ると、JavaScript - 横にタブをスライドするCSSがうまくいかない｜teratail の続きですね。スクリプトも提示しないと前の質問を見てない人には意味不明です。

下記のようなCSSで解決できました。
translateXを使うなら position: absolute; は不要です。

.tab {
    height: 40px;
    width: 100px;
}

.selected {
    background-color: gray;
}

#container {
    overflow: hidden;
    width: 400px; /*幅のみ設定*/
}

#slide {
    white-space: nowrap; /*折り返し禁止*/
    transition: transform 1s ease-in-out 0s;
    -moz-transition: -moz-transform 1s ease-in-out 0s;
    -webkit-transition: -webkit-transform 1s ease-in-out 0s;
}

.box {
  display: inline-block; /*横並び*/
  width: 400px;
  height: 200px;
}

#first {
  background-color: pink; /*分かり安いように背景色を設定*/
}

#second {
  background-color: aqua; /*分かり安いように背景色を設定*/
}

.move-to-first {
    transform: translateX(0px);
    -moz-transform: translateX(0px);
    -webkit-transform: translateX(0px);    
}
.move-to-second {
    transform: translateX(-400px);
    -moz-transform: translateX(-400px);
    -webkit-transform: translateX(-400px);
}

動作確認用サンプル

質問の追記部分について

そのような複雑な仕様になるなら、Flexboxで横並びにするようにすると楽ですね。
下記のサンプルはFlexboxのほぼデフォルトの状態ですが、
垂直位置やボックスの高さの伸縮など自由に設定できます。

.tab {
  height: 40px;
  width: 100px;
}

.selected {
  background-color: gray;
}

#container {
  overflow: hidden;
  width: 400px;
}

#slide {
  display: flex;
  flex-wrap: nowrap;
  width: 800px;
  transition: transform 1s ease-in-out 0s;
  -moz-transition: -moz-transform 1s ease-in-out 0s;
  -webkit-transition: -webkit-transform 1s ease-in-out 0s;
}

.box {
  width: 50%;
}

#first {
  background-color: pink;
}

#second {
  background-color: aqua;
}

.move-to-first {
  transform: translateX(0px);
  -moz-transform: translateX(0px);
  -webkit-transform: translateX(0px);    
}
.move-to-second {
  transform: translateX(-400px);
  -moz-transform: translateX(-400px);
  -webkit-transform: translateX(-400px);
}
.box-red {
  width:100px;
  height:100px;
  background-color:red;
}
.box-blue {
  width:100px;
  height:100px;
  background-color:blue;
}

動作確認用サンプル

Flexboxの詳細は下記を参照してください。
もう迷わない！CSS Flexboxの使い方を徹底解説 | Web Design Trends

Comments

[tomtom1]

ご回答ありがとうございます！ご丁寧にお答え頂き、非常にわかりやすかったです。貴重なお時間をありがとうございます。また、前の質問も貼って頂きありがとうございます、ご指摘の通り、これだけではわからなかったですね。

hatena19さんのおかげで、答えに非常に近くことができたのですが、
子要素の高さに合わせるため、.boxのheight:0;を設定したところ、一箇所問題が発生しました。
追記で加えましたので、宜しければご確認お願いします！

[tomtom1]

遅くなり申し訳ありません、ご丁寧にありがとうございます！無事解決しました！