Make flex item have 100% height and overflow: scroll

Question

I want a flex item to take 100% of remaining height and display the overflow: scroll bar.

It looks like problem comes from my #userList which takes 100% of the window height and not taking the remaining space .

body {
  display: flex; 
  flex-direction: column; 
  min-height: 100%; 
  margin:0px;
}
.wrapper {
  display: block; 
  flex: 1 1 auto; 
  display: flex;
  flex-direction: row; /
}

#chatContainer {
 background: orange;
 width: calc(100% - 350px);
 display: flex;
 flex-direction: column;
}
#tabs{
 background-color: red;
 flex: 1 1 0px;
 display: flex; 
}
#usersContainer {
  flex: 1 1 0; 
  display:flex;
  flex-direction:column;
}
#userListWrapper {
 background-color:pink;
 flex: 1 1 auto;
 display:flex;
}
#userList {
    -webkit-flex: 1 1 auto;
    overflow: auto;
    min-height: 0px;
    height:100%;

}
.input {
 background-color: #49FFFC;
}

  <div class="wrapper">
    <div id="chatContainer">
      <div id="webcamContainer">webcam</div>
      <div id="tabs">tabs here</div>
      <div id="footer"  style="background-color:#A0C8FF;height:50px">footer</div>
    </div>
    <div id="usersContainer" style="background-color:blue">
      
      <div class="input">searchInput1</div>
      <div class="input">searchInput2</div>
  
          <div id="userList">
              user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>
              user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>
              user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>
              user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>user1<br>user2<br>
          </div>
  
    </div>
  </div>

https://jsfiddle.net/jpo31gq9/

YES !!! You are a genious ! Can you explain me what you did ? — yarek, Feb 09 '16 at 00:07

score 17 · Accepted Answer · edited Jun 20 '20 at 09:12

The main problem you are having is a violation of the rules governing percentage heights in CSS.

Basically, when using percentage heights, you must always specify the height of the parent element. Otherwise, the element with a percentage height has no frame of reference, and the height computes to auto (the height of the content).

From the spec:

CSS height property

percentage
Specifies a percentage height. The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly and this element is not absolutely positioned, the value computes to "auto".

auto
The height depends on the values of other properties.

_{source: https://www.w3.org/TR/CSS21/visudet.html#propdef-height}

So if you plan to use percentage heights, you need to specify a height on every parent element up to the root element (html) or up to a fixed height declaration (such as height: 250px).

In your CSS, you have body { min-height: 100%; }. However, there is no height specified on the parent (html).

The following parent elements in your code are missing a height declaration:

html
body (min-height doesn't count)
.wrapper
#chatContainer

With the following adjustments your layout works.

html { height: 100%; }              /* NEW */

body {
    display: flex;
    flex-direction: column;
    /* min-height: 100%; */
    margin: 0px;
    height: 100%;                  /* NEW */
}

.wrapper {
    display: block;
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    height: 100%;                  /* NEW */
}

#chatContainer {
    background: orange;
    width: calc(100% - 350px);
    display: flex;
    flex-direction: column;
    height: 100%;                  /* NEW */
}

Revised Fiddle

It's also worth mentioning some variations among current browsers.

Percentage Heights: Chrome/Safari vs Firefox/IE

Although the traditional implementation of percentage heights uses the value of the height property, recently some browsers have broadened their scope.

As evidenced in the following posts, Firefox and IE are now also using flex heights to resolve the percentage height of child elements.

Bottom line: Chrome and Safari resolve percentage heights based on the value of the parent's height property. Firefox and IE11/Edge use the parent's computed flex height.

For now, the simplest cross-browser solution to this problem would be, in my view, using the height property across the board for percentage heights.

I have 5 nested div, is there any way to avoid add `height:100%` to all parents? — Ali Akbar Azizi, Feb 21 '21 at 11:56
@AliAkbarAzizi, try adding `display: flex` to the containers. Explained in my answer here: https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent — Michael Benjamin, Feb 21 '21 at 23:21

Make flex item have 100% height and overflow: scroll

1 Answers1