使flex项具有100%高度和溢出:滚动

Question

我想要一个弹性项目占据剩余高度的100%并显示overflow: scroll条形.

看起来问题来自于我#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://jsfiddle.net/jpo31gq9/

Answer 1

您遇到的主要问题是违反了管理CSS百分比高度的规则.

基本上,使用百分比高度时,必须始终指定父元素的高度.否则,具有百分比高度的元素没有引用框架,并且高度计算为auto(内容的高度).

从规格:

CSS height属性

百分比
指定百分比高度.百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度且此元素未绝对定位,则该值将计算为"auto".

auto
高度取决于其他属性的值.

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

因此,如果您计划使用百分比高度,则需要在每个父元素上指定一个高度,直到根元素(html)或最多固定高度声明(例如height: 250px).

在你的CSS中,你有body { min-height: 100%; }.但是,heightparent(html)上没有指定.

代码中的以下父元素缺少height声明:

• html
• body(min-height不算)
• .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与Firefox/IE

虽然传统的百分比高度实现使用了height属性的值,但最近一些浏览器扩大了它们的范围.

如以下帖子所示,Firefox和IE现在也使用弹性高度来解析子元素的百分比高度.

• Chrome/Safari不会填充100%高度的flex父级
• Chrome中的flexbox项目中的高度不正确
• Chrome中的Flexbox - 如何限制嵌套元素的大小？
• Chrome会忽略列布局中的flex-basis

底线:Chrome和Safari根据父级height属性的值来解析百分比高度.Firefox和IE11/Edge使用父级的计算弹性高度.

就目前而言,在我看来,对于这个问题最简单的跨浏览器解决方案是使用全面的height属性来实现百分比高度.