Flexbox set overflow inside another flexbox with dynamic height

Question

I'm currently working on an electron app, this is what my layout looks like:

Heres my corresponding structure:

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>

My problem is, that no matter what I'm trying, the List is expanding and never overflows, pushing down the footer out of the window (and itself, too).

I've been searching for answers, but none of which I found fixed my problem.
E.g. every answer in Scrolling a flexbox with overflowing content does assume that theres a fixed height somewhere you can work with, which I don't have.

When resizing the window, only the main window should expand, while the bottom and top should always stay where they are. You could also take a look at how Resizing in e.g. Filezilla works, which is exactly the behaviour I want.

Link to JSFiddle: https://jsfiddle.net/oh5knsjb/71/

Are you looking for something like this? https://jsfiddle.net/jd8r3h4p/2/ — Weston, Apr 09 '21 at 19:46

score 2 · Accepted Answer · answered Apr 09 '21 at 19:34

You are almost good:

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>

After implenting this, it still didnt work. I found out the initial problem was that SASS (which I have used) didn't convert my CSS to what it should've, thus the CSS never did what it should have. After rewriting everything in pure CSS everything worked as expected! — thoerni, Apr 09 '21 at 22:56

Flexbox set overflow inside another flexbox with dynamic height

1 Answers1