Flexbox 在动态大小的父级中滚动溢出内容

Question

我有一个简单的menu和content div 结构。 menu没有固定大小，可以根据其内容进行扩展。 下面的content div 应该占用可用空间并在溢出时滚动它自己的内容。 不幸的是， flexbox现在的行为方式是content div，由于其flex:1属性，根据其内容展开而不是滚动内容。

有没有一种方法可以使用flex:1保留动态大小并且还可以滚动content div 的内容？

 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>

Answer 1

你不见了

1. .main上的高度根据主体或视口的高度调整其大小。

2. 溢出.content ，所以它溢出，除非你想让.main溢出（哪个身体已经溢出）

3. 最后 flex-shrink:0; 在.segment上，所以它不会缩小:)

这是我所了解的您所追求的示例：

 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>