Use flex container with a scrolling div inside

Question

I have a side panel. In that side panel I want to have two separate panels stacked on top of each other containing 3 divs. Two of the contained divs will have a fixed height and never exceed that fixed height. The third div has a variable number of elements that I wish to be scrollable if it exceeds the height of the column. The two top level panels should not exceed the height of the window as they do now.

Of course you have the scenario where one list is longer than the other in which case you want the longer to occupy the majority of space. So far I have the following code:

#column {
  float: right;
  width: 250px;
  max-width: 250px;
  height: 100%;
}

#debug {
  display: flex;
  height: inherit;
  flex-direction: column;
}

#debug>div {
  background-color: #eee;
  border: 1px solid black;
  box-sizing: border-box;
}

#sistack div,
#threads div {
  display: block;
  height: 30px;
  width: 100%;
}

#sistack,
#threads {
  min-height: 60px;
}

.toolbar {
  height: 50px;
  background-color: blue;
  width: 100%;
}

<div id=column>
  <div id=debug>
    <div>
      <span>Hello Sir</span>
      <div class=toolbar></div>
      <div id=sistack>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </div>
    </div>
    <div>
      <span>Threads</span>
      <div class=toolbar></div>
      <div id=threads>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
        <div>Item</div>
      </div>
    </div>
  </div>
</div>

How can I get flex to evenly distribute the screen height to the two top level panels and have scroll bars in the lists (#sistack,#threads) when necessary?

I'm starting to think this can't be done purely with CSS and HTML. — , Mar 07 '17 at 08:59

score 0 · Answer 1 · answered Mar 03 '17 at 09:11

0

I'm not sure if I get your point but in order to have a scrolling div, you need to use a fix height and add an overflow-y or x to scroll.

#sistack,#threads{
    height:60px;
    overflow-y: scroll;
}

answered Mar 03 '17 at 09:11

claudios

6,588
8
47
90

But the whole point of flex is that you don't need to use fixed heights and items should stretch to fill available space? – Mar 03 '17 at 09:12

Use flex container with a scrolling div inside

1 Answers1