Div's height doesnt expand

Question

I have been dealing with some problem about the divs height. It simply doesnt expand even thought theres a content. Let me first show you the problem on the screenshots:

Thats the content:

And thats the container:

As you can see, the container is pretty short even though it contains an element with some long content. I have tried things like adding "overflow: auto;" but it just adds some scrollbar.. not sure what else i can do here.. this is the most important code:

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%;
    }   

}

If you have any ideas, please help!

UPDATE: This is what i am trying to achieve:

So i was just setting up those boxes around that huge "textbox" when i realized i got some problems there and when i put those small colorful boxes on the bottom, its actually not the bottom of the "textbox", but its the bottom of the parent ("container"). The thing is.. i want the container to expand right with the "textbox" so their bottom should be equal and then i can easily set up those small boxes around it.

Answer 1

I am not sure this is what you want or not. But,

position of `#mytextbox` div is absolute so container will never get its height.  

I have removed media query as here out put is on smaller screen. You can try this by removing position:absolute from #mytextbox css

Run below code snippet. Enlarge output window to full screen so you can see how it will look for larger screen.

.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 {
        top: 30%;
        z-index: 2;
        order: 3;
        border: 1px solid black;
        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%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<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>

Answer 2

Right, what's been done here is that the box you're using has a predetermined height and width, this is because you're using the prefixed version to make it look the same on other devices, if you put overflow: auto on it, it will basically tell the div that you need more space, since it's prefixed it's not able to add more space than it already has, this is why you get the scroll bar. What you need to do is to either remove the javascript/css you're using or set it to a larger box, there is for example col.sm.11 that you could use if you need a larger box for this.