У меня есть проблема с высотой divs. Он просто не расширяет даже мысль theres содержание. Прежде всего позвольте мне показать вам проблему на скриншотах:Высота Div не расширяется
Вот содержание: 
И вот контейнер: 
Как вы можете видеть, контейнер является довольно коротким, даже если она содержит элемент с некоторым длинным контентом. Я пробовал такие вещи, как добавление «overflow: auto»; но это только добавляет некоторые скроллбар .. не уверен, что еще я могу сделать здесь .. это самый важный код:
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