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

Posted 2023-03-06

【中文标题】使弹性项目具有 100% 的高度和溢出：滚动 [重复]

【英文标题】：Make flex item have 100% height and overflow: scroll [duplicate]

【发布时间】：2016-05-18 18:51:12

【问题描述】：

我希望 flex 项目占用 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/

【问题讨论】：

这是你想要的吗？ jsfiddle.net/k6Lz64Lz

是的！你真是个天才！你能解释一下你做了什么吗？

【参考方案1】：

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

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

来自规范：

CSS height property

百分比 指定百分比高度。百分比是相对于生成框的包含块的高度计算的。如果没有明确指定包含块的高度并且该元素不是绝对定位的，则该值计算为“auto”。

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

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

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

在您的 CSS 中，您有 body min-height: 100%; 。但是，父级 (html) 上没有指定 height。

您的代码中的以下父元素缺少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 */

Revised Fiddle

---

还值得一提的是当前浏览器之间的一些差异。

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

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

正如以下帖子所证明的，Firefox 和 IE 现在也使用弹性高度来解决子元素的百分比高度。

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

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

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

【讨论】：

我有 5 个嵌套的 div，有什么办法可以避免将 height:100% 添加到所有父母？

@AliAkbarAzizi，尝试将display: flex 添加到容器中。在我的回答中解释：***.com/questions/33636796/…