Make flex item have 100% height and overflow: scroll [duplicate]

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/

Answer 1

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.

• Chrome / Safari not filling 100% height of flex parent
• Height is not correct in flexbox items in Chrome
• Flexbox in Chrome--How to limit size of nested elements?
• Chrome ignoring flex-basis in column layout

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.