How do I create flexible div containers that marry float behavior with dynamic widths and heights?

user_14657619 0
Viewed 44

I'm trying to create the below situation where the content_container's width reaches the right side of the screen and automatically scales depending on whether the expandable pane is collapsed or not. If I put width: 100% on .content_container it goes past the width of the screen, creating an unnecessary scroll bar as well as shifts to being under the expandable pane. Also you can see that the expandable_pane's height does not reach the full extent of the parent, but the content_container's does.

There is obviously something I'm not understanding on a fundamental level as I will admit that my grasp of various display types and behaviors is not solid and I'm still learning. Any help would be 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>

css html jquery javascript
1 Answers

You aren't that far off with your code. First of all, your .flex_container class is missing display: flex. Secondly, if you want your container to take up the remainder of the space, it needs to be able to flex. If you give the container flex: 1 100px, which is a shorthand property, it tells the container to flex-grow: 1 with a flex-basis of 100px. With flexbox, you no longer need float: left in this scenario.

Try playing around with the values to get a better grasp of how flexbox can work and I also recommend reading the MDN articles on the property. MDN Flex

$(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{
  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 {
  display: flex;
  height: 300px;
}

.content_container{
  padding-left: 10px;
  flex: 1 100px;
  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>

user_197470090
Related