仅将滚动添加到内容，而不是标题答案

【问题标题】：Add scroll to content only, not header仅将滚动添加到内容，而不是标题
【发布时间】：2019-06-12 01:16:43
【问题描述】：

我基本上有相当标准的两列布局：

<div id="app">
  <div class="left">
    <div class="first">
      <div class="header">Dynamic Items</div>
      <div class="scrollable">
        <div id="items">
          <div class="item">Predefined</div>
        </div>      
      </div>
    </div>
    <div class="second">
      <div class="header">Fixed Items</div>
      <div class="items">
        <div class="item">Fixed Item 1</div>
        <div class="item">Fixed Item 2</div>
        <div class="item">Fixed Item 3</div>
      </div>
    </div>
  </div>
  <div class="right">
    <button id="btn">Add 5 Items</button>
  </div>
</div>

它几乎可以按预期工作：当我将项目添加到“动态项目 > 项目”容器时，它会按预期拉伸，直到左列占据页面高度的 100%。添加其他项目使“可滚动”.first 容器。

.left {
  display: flex;
  flex-direction: column;
}

.first {
  overflow: auto;
}

但是，我想要实现的是仅使 .scrollable 部分滚动，保持 .first 容器的 .header 就位。

请告知如何实现这种行为。

请看一下这个小提琴示例：https://jsfiddle.net/Alexey_U/scf4mn86/39/

【问题讨论】：

标签： html css flexbox overflow

【解决方案1】：

无论你想让什么可滚动，你都必须给定高度

因此给容器高度为 y 给标题高度 x 并且可滚动高度为 calc(y-x)

因此，具有固定高度和溢出滚动属性，可滚动将仅滚动而将标题留在其位置

【讨论】：

【解决方案2】：

使.first 成为一个弹性容器。将滚动功能赋予.scrollable。

对您的代码进行以下调整：

.first {
  /* overflow: auto; */
  display: flex;
  flex-direction: column;
  min-height: 0; /* for Edge and FF; see https://stackoverflow.com/q/36247140/3597276 */
}

.scrollable {
  overflow: auto;
}

revised fiddle demo

【讨论】：