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>