Estoy tratando de crear la siguiente situación en la que el ancho de content_container alcanza el lado derecho de la pantalla y se escala automáticamente dependiendo de si el panel expandible está colapsado o no. Si coloco width: 100% en .content_container , pasa el ancho de la pantalla, creando una barra de desplazamiento innecesaria y cambios para estar debajo del panel expandible. También puede ver que la altura de expandable_pane no alcanza la extensión completa del padre, pero la de content_container sí.
Obviamente, hay algo que no entiendo en un nivel fundamental, ya que admito que mi comprensión de varios tipos de pantallas y comportamientos no es sólida y todavía estoy aprendiendo. Cualquier ayuda sería apreciada.
$(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>No estás tan lejos con tu código. En primer lugar, a su clase .flex_container le falta display: flex . En segundo lugar, si desea que su contenedor ocupe el resto del espacio, debe poder flexionarse. Si le da al contenedor flex: 1 100px , que es una propiedad abreviada, le dice al contenedor que flex-grow: 1 con una base flexible de 100px . Con flexbox, ya no necesita float: left en este escenario.
Intente jugar con los valores para obtener una mejor comprensión de cómo puede funcionar flexbox y también recomiendo leer los artículos de MDN sobre la propiedad. Flexibilidad de MDN
$(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>