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>

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

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

.first {
  overflow: auto;
}

但是，我要实现的目的是仅滚动.scrollable部分，将.header容器中的.first保持在适当位置。

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

请查看以下小提琴示例：https://jsfiddle.net/Alexey_U/scf4mn86/39/

Answer 1

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

Answer 2

无论您想使其滚动如何，都必须设置固定高度

因此将容器的高度设为y 给标题高度x 并滚动显示calc（y-x）

的高度

因此具有固定的高度和溢出滚动属性，scrollable将仅滚动标题而将其滚动

仅将滚动条添加到内容，不添加标题

2 个答案: