Tengo un menu simple y una estructura div de content . El menu no tiene un tamaño fijo y puede expandirse dependiendo de su contenido. El div de content debajo debe tomar el espacio disponible y desplazar su propio contenido si se desborda. Desafortunadamente, flexbox ahora se comporta de tal manera que el div de content , debido a su propiedad flex:1 , se expande de acuerdo con su contenido en lugar de desplazarse por el contenido.
¿Hay alguna manera de preservar los tamaños dinámicos usando flex:1 y también tener el contenido del desplazamiento div de content ?
function toggleMenu() { const menu = document.querySelector(".menu"); if(menu.classList.contains("open")) { menu.querySelector(".text").innerHTML = "<p> small text </p>"; menu.classList.remove("open"); }else { menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>"; menu.classList.add("open"); } } body { padding: 0; margin: 0; background-color: #17141d; display: flex; height: 100vh; } .main { display: flex; flex-direction: column; flex: 1; background-color: grey; } .menu { background-color: blueviolet; } .content { display: flex; flex: 1; background-color: aqua; } .segment-wrapper { flex: 1; display: flex; background-color: red; flex-direction: column; overflow-y: scroll; padding: 10px; box-sizing: border-box; } .segment { height: 500px; background-color: green; border-radius: 5px; border: solid 1px black; width: 100%; margin-bottom: 10px; } <div class="main"> <div class="menu open"> <div class="text"><h1>im the menu</h1></div> <button onclick="toggleMenu()">Toggle</button> </div> <div class="content"> <div class="segment-wrapper"> <div class="segment"> </div> <div class="segment"> </div> <div class="segment"> </div> </div> </div> </div>estás perdido
una altura en .main para dimensionarlo según el cuerpo o la altura de la ventana gráfica.
desbordamiento en .content , por lo que se desborda, a menos que desee que .main se desborde (que cuerpo ya lo hace)
y finalmente flex-shrink:0; en .segment para que no se encoja :)
aquí un ejemplo de lo que entendí que buscabas:
function toggleMenu() { const menu = document.querySelector(".menu"); if(menu.classList.contains("open")) { menu.querySelector(".text").innerHTML = "<p> small text </p>"; menu.classList.remove("open"); }else { menu.querySelector(".text").innerHTML = "<h1> im the menu </h1>"; menu.classList.add("open"); } } body { padding: 0; margin: 0; background-color: #17141d; display: flex; height: 100vh; } .main { display: flex; flex-direction: column; flex: 1; background-color: grey; max-height;100%; } .menu { background-color: blueviolet; } .content { display: flex; flex: 1; background-color: aqua; overflow:auto; } .segment-wrapper { flex: 1; display: flex; background-color: red; flex-direction: column; overflow-y: scroll; padding: 10px; box-sizing: border-box; } .segment { flex-shrink:0; height: 500px; background-color: green; border-radius: 5px; border: solid 1px black; width: 100%; margin-bottom: 10px; } <div class="main"> <div class="menu open"> <div class="text"><h1>im the menu</h1></div> <button onclick="toggleMenu()">Toggle</button> </div> <div class="content"> <div class="segment-wrapper"> <div class="segment"> </div> <div class="segment"> </div> <div class="segment"> </div> </div> </div> </div>