父元素仅设置max-height，子元素高度百分之100，溢出后如何显示滚动条

发表于 更新于 分类于 ， 本文字数： 874 阅读时长 ≈ 1 分钟

本文介绍了如何实现：

父元素仅设置 max-height，子元素的高度为 100%，跟随父元素高度的变化而变化，且当达到最大高度后，子元素显示滚动条。

思路

  1. 由于父元素没有设置 height 属性，因此子元素不能使用 height:100% 来跟随父元素的变化
  2. 通过 flex 布局，将子元素设置成 flex:1 来让其与父元素同高
  3. 再设置子元素 overflow:auto;flext-wrap:nowrap; 来显示滚动条

实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="app">
  <div class="container">    
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
      <div>Item 1</div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#app{
  display: flex;
  max-height: 200px;
}

.container {
  padding: 10px;
  display: flex;
  flex-direction: column;  
  border: 1px solid #ccc;
  /* height: 100%; 此处不能使用这个属性，因为父类没有设置 height,因此无法计算高度*/
  flex:1;
  overflow: auto;
  flex-wrap: nowrap;
}

演示

父元素设置max-height，子元素高度100%实现 (runjs.work)