yarek February 2016

Make flex item have 100% height and overflow: scroll

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>        

Answers


Michael_B February 2016

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%; */ 

Post Status

Asked in February 2016
Viewed 1,911 times
Voted 11
Answered 1 times

Search




Leave an answer