My goal is to adjust the height of children elements within a parent div that has a min-height of 100%. I want the wrapper's height to dynamically adjust based on the content it contains. When I set the min-height to 100%, the wrapper expands according to the content, but the sidebar and sidebar-tanks collapse to the height of their respective content. I would like them to occupy around 98% of the total height of the parent wrapper.
If I set the height to 100% for the parent wrapper and 98% for the children sidebar and sidebar-tank, they expand as desired. However, the wrapper does not adjust its height according to the content inside the content div. Instead, the wrapper only extends up to the height of the browser window, causing overflow content to be hidden.
HTML :
<body>
<div class="wrapper">
<div class="client-dasboard">
<div class="sidebar">
</div>
<div class="sidebar-tanks">
</div>
<div class="content>
</div>
</div>
</div>
</body>
SCSS :
body{
display:block;
position: relative;
height:100%;
.wrapper{
display: block;
position: relative;
height: 100%;
overflow: hidden;
width: 1168px;
margin: 0px auto;
background: #ececec;
.sidebar,
.sidebar-tanks{
height: 98%;
display: block;
float: left;
}
.content{
min-height: 100%;
height:auto;
}
}
}