使柔性项具有100%高度和溢出：滚动[重复]

Question

我想要一个flex项目采取100%的剩余高度，并显示溢出：滚动栏。

问题似乎来自于我的#userlist，它占用了窗口高度的100%，而不占用剩余的空间。

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://jsfidle.net/jpo31gq9/

Answer 1

您遇到的主要问题是违反了CSS中控制高度百分比的规则。

基本上，在使用百分比高度时，必须始终指定父元素的高度。否则，具有百分比高度的元素没有参考框架，高度计算为auto（内容的高度）。

根据规范：

_{来源:https://www.w3.org/tr/css21/visudet.html#propdef-height}

因此，如果您计划使用百分比高度，则需要在每个父元素上指定一个高度，直到根元素(HTML)或一个固定的高度声明（如height:250px)。

在CSS中，您有body{min-height：100%；}。但是，在父级(HTML)上没有指定height。

代码中的下列父元素缺少height声明：

• HTML
• 车身(最小高度不计算在内）
• .wrapper
• #chatcontainer

通过以下调整，您的布局工作。

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 */
}

百分比高度：Chrome/Safari vs Firefox/IE

虽然百分比高度的传统实现使用height属性的值，但最近一些浏览器已经拓宽了范围。

正如下面的帖子所证明的那样，Firefox和IE现在也在使用flex heights来解决子元素的百分比高度。

null

就目前而言，在我看来，解决这个问题的最简单的跨浏览器解决方案是全面使用height属性来处理百分比高度。