I am attempting to achieve a specific layout where the width of the content_container extends up to the right side of the screen and dynamically adjusts based on whether the expandable pane is collapsed or expanded. Applying width: 100% to .content_container causes it to exceed the screen width, resulting in an unnecessary scrollbar and causing it to shift under the expandable pane. Additionally, the height of the expandable_pane does not reach the full height of its parent, whereas the content_container does.
It is clear that there are concepts I am struggling to grasp at a fundamental level, especially regarding different display types and behaviors. Any assistance in resolving this issue would be greatly appreciated.
$(document).ready(function(){
$("#expandable_pane").click(function(){
if(this.className.search("collapsed") != -1){
this.className = this.className.replace("collapsed", "extended");
} else {
this.className = this.className.replace("extended", "collapsed");
}
})
}).expandable_pane{
float: left;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
overflow: hidden;
white-space: nowrap;
height: 100%;
padding: 2px;
transition: width .5s;
}
.expandable_pane.collapsed {
width: 10px;
}
.expandable_pane.extended {
width: 500px;
}
.flex_container {
height: 300px;
}
.content_container{
float: left;
padding-left: 10px;
height: 100%;
}
.content_pane {
padding: 10px;
box-shadow: 1px 1px 10px 1px rgb(98,98,98);
height: 100%;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="flex_container">
<div class="expandable_pane collapsed" id="expandable_pane">
Menu Icons/Links would go here.
</div>
<div class="content_container">
<div class="content_pane">
Information for page here.
</div>
</div>
</div>