Having a bootstrap 3 page with a centered box that contains content, I noticed that the box does not expand when the content grows. The bootstrap container grows, but the box remains static. I have tried using "position:relative" and "overflow:hidden", as well as "container-fluid", but none of these solutions worked.
I am puzzled as to why the box is not expanding.
Here are my CSS styles:
html,
body {
height:100%;
width:100%;
}
.container {
height:100%;
min-height:100%;
}
.row {
height:100%;
min-height:100%;
}
.box {
height:90%;
min-height:90%;
max-width:1100px;
background-color:rgba(0,0,0,0.83);
text-align:left;
padding-left:5%;
padding-right:5%;
padding-top:1%;
overflow:hidden;
position: relative;
}
HTML:
<div class="container">
<div class="row">
<div class="box">
<div class="col-xs-12">
</div>
</div>
</div>
</div>