html - 仅向内容添加滚动，而不是标题

Question

我基本上有非常标准的两列布局:

<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>

它几乎按预期工作:当我将元素添加到“Dynamic Items > items”容器时，它会按预期拉伸(stretch)，直到左列占据页面高度的 100%。添加额外的元素使“可滚动”.first 容器。

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

.first {
  overflow: auto;
}

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

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

请看一下这个 fiddle 示例:https://jsfiddle.net/Alexey_U/scf4mn86/39/

Answer 1

使.first 成为 flex 容器。将滚动功能赋予.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