0
divsの高さに関する問題を扱っています。それは単にコンテンツを考えても拡張しません。Divの高さが伸びない
コンテンツ厥： 
とコンテナのthats： 
あなたが見ることができるように、コンテナは、それが含まれているにもかかわらず、かなり短いです私は最初にあなたのスクリーンショット上の問題をお見せしましょう長い内容の要素。私は「オーバーフロー：オート」のようなものを試しました。
HTML：：
<div id="menu2" class="container">
<div id="mytextbox" class="col-sm-12 col-xs-12">
<h2 id="h2Box1" style="visibility: visible">Text from the box1</h2>
<h2 id="h2Box2" style="visibility: hidden">Text from the box2</h2>
<h2 id="h2Box3" style="visibility: hidden">Text from the box3</h2>
<h2 id="h2Box4" style="visibility: hidden">Text from the box4</h2>
<p id="pBox1" style="visibility: visible">Paragraph from the box1</p>
<p id="pBox2" style="visibility: hidden">Paragraph from the box2</p>
<p id="pBox3" style="visibility: hidden">Paragraph from the box3</p>
<p id="pBox4" style="visibility: hidden">Paragraph from the box4</p>
</div>
<div id="box1" class="col-sm-6 col-xs-3 mybox active-box">
<span class="hidden-xs">BOX NAME 1</span>
<span class="visible-xs">1</span>
</div>
<div id="box2" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 2</span>
<span class="visible-xs">2</span>
</div>
<div id="box3" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 3</span>
<span class="visible-xs">3</span>
</div>
<div id="box4" class="col-sm-6 col-xs-3 mybox">
<span class="hidden-xs">BOX NAME 4</span>
<span class="visible-xs">4</span>
</div>
</div>
CSS：
@media screen and (min-width: 992px) {
.container {
display: flex;
flex-flow: row wrap;
width: 40%;
margin-left: 30%;
margin-right: 30%;
padding-left: 0;
padding-right: 0;
}
#menu2 {
position: relative;
padding: 5% 0;
}
.mybox {
padding-top: 3%;
padding-bottom: 3%;
width: 30%;
font-size: 1.5em;
}
#mytextbox {
position:absolute;
top: 30%;
z-index: 2;
order: 3;
background:
linear-gradient(
rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0.7)
),
url('./../images/Pattern.png') bottom no-repeat;
}
#box1 {
position: absolute;
top: 5%;
order: 1;
background-color: rgb(66,142,158);
margin-right: 25%;
margin-left: -28%;
}
#box2 {
position: absolute;
order: 2;
background-color: rgb(196,52,52);
margin-left: 30%;
right: -28%;
top: 5%;
}
#box3 {
position: absolute;
order: 4;
background-color: rgb(223,187,66);
margin-right: 30%;
margin-left: -28%;
bottom: 5%;
}
#box4 {
position: absolute;
order: 5;
background-color: rgb(80,139,97);
margin-left: 30%;
right: -28%;
bottom: 5%;
}
}
お持ちの場合はそれだけでいくつかのスクロールバー..私はここで行うことができます他に何かわからない。これが最も重要なコードですが追加されます任意のアイデア、助けてください！
UPDATE： これは私が達成しようとしているものです：
ので、私はちょうど私がそこにいくつかの問題を持って実現したときに巨大な「テキストボックス」を中心にこれらのボックスを設定し、ときに私ましたそれらの小さなカラフルなボックスを底に置いてください。実際には "テキストボックス"の底ではなく、親（ "コンテナ"）の底です。物事は..私は右に "テキストボックス"ので、彼らの底は等しくする必要がありますので、私は簡単にその周りの小さなボックスを設定することができますコンテナを展開したい。
あなたは「ボックス1」について話していますか？それは含まれているテキストよりも背が高い。問題は何ですか？ –
あなたはそれが位置のためだとは思わない：絶対; ？ –
ここにはJavaScriptがタグ付けされていますか？ – Rob