Переполнение набора Flexbox внутри другого Flexbox с динамической высотой
В настоящее время я работаю над электронным приложением, вот как выглядит мой макет:
Вот моя соответствующая структура:
max_elements = 20
function generate(e){
html = ""
for (i = 0; i < max_elements; i++){
html += `<li>Element ${i + 1}</li>`
}
e.innerHTML = html
}div {
border: 1px solid black;
}
#root {
width: 500px;
height: 300px;
position: relative;
}
#app {
height: 100%;
width: 100%;
}
#container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#top {
height: 50px;
}
#main {
flex: 1;
}
#mainContainer {
display: flex;
height: 100%;
width: 100%;
}
.mainWindow {
flex: 1;
position: relative;
}
.list {
overflow: auto;
}
#bottom {
height: 50px;
}<body>
<div id = "root"> <!-- Imagine the root id as Electron App Window. -->
<div id = "app">
<div id = "container">
<div id = "top">HEADER</div>
<div id = "main">
<div id = "mainContainer">
<div class = "mainWindow">
<div class = "winHeader">WINDOW 1 HEADER</div>
<div id = "a" class = "list" onclick = "generate(a)">CLick Here for the list</div>
</div>
<div class = "mainWindow">
<div class = "winHeader">WINDOW 2 HEADER</div>
<div id = "b" class = "list" onclick = "generate(b)">CLick Here for the list</div>
</div>
</div>
</div>
<div id = "bottom">FOOTER</div>
</div>
</div>
</div>
</body>Моя проблема в том, что что бы я ни пытался, список расширяется и никогда не переполняется, выталкивая нижний колонтитул из окна (и самого себя).
Я искал ответы, но ни один из них не решил мою проблему.
Например. каждый ответ в Прокрутка флексбокса с переполненным контентом предполагает, что есть фиксированная высота, с которой вы можете работать, чего у меня нет.
При изменении размера окна только главное окно должно расширяться, а нижняя и верхняя части всегда должны оставаться на своих местах. Вы также можете посмотреть, как изменение размера, например, Filezilla работает, и это именно то, что мне нужно.
Ссылка на JSFiddle: https://jsfiddle.net/oh5knsjb/71/
Да (минимальное ограничение на количество символов ...)
Вы ищете что-то подобное? jsfiddle.net/jd8r3h4p/2
Ответы 1
У тебя почти все хорошо:
max_elements = 20
function generate(e){
html = ""
for (i = 0; i < max_elements; i++){
html += `<li>Element ${i + 1}</li>`
}
e.innerHTML = html
}div {
border: 1px solid black;
}
#root {
width: 500px;
height: 300px;
position: relative;
}
#app {
height: 100%;
width: 100%;
}
#container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
#top {
height: 50px;
}
#main {
flex: 1;
min-height:0; /* added */
}
#mainContainer {
display: flex;
height: 100%;
width: 100%;
}
.mainWindow {
flex: 1;
position: relative;
/* added */
display:flex;
flex-direction:column;
}
.list {
overflow: auto;
}
#bottom {
height: 50px;
}<body>
<div id = "root"> <!-- Imagine the root id as Electron App Window. -->
<div id = "app">
<div id = "container">
<div id = "top">HEADER</div>
<div id = "main">
<div id = "mainContainer">
<div class = "mainWindow">
<div class = "winHeader">WINDOW 1 HEADER</div>
<div id = "a" class = "list" onclick = "generate(a)">CLick Here for the list</div>
</div>
<div class = "mainWindow">
<div class = "winHeader">WINDOW 2 HEADER</div>
<div id = "b" class = "list" onclick = "generate(b)">CLick Here for the list</div>
</div>
</div>
</div>
<div id = "bottom">FOOTER</div>
</div>
</div>
</div>
</body>После реализации это все еще не работало. Я обнаружил, что первоначальная проблема заключалась в том, что SASS (который я использовал) не преобразовал мой CSS в то, что он должен был иметь, поэтому CSS никогда не делал того, что должен был иметь. После переписывания всего на чистый CSS все заработало как положено!
Вам нужна полоса прокрутки при переполнении?