Add scroll to content only, not header

Question

I basically have pretty standard two-column layout:

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

It works almost as expected: when I add item to "Dynamic Items > items" container it stretches as expected until left column takes 100% of page height. Adding additional items makes "scrollable" .first container.

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

.first {
  overflow: auto;
}

But, what I'm trying to achieve is to make only .scrollable part to scroll, keeping .header of the .first container in place.

Please advise how to achieve such behavior.

Please take a look at this fiddle example: https://jsfiddle.net/Alexey_U/scf4mn86/39/

score 1 · Answer 1 · answered Jan 17 '19 at 19:24

Make .first a flex container. Give the scroll function to .scrollable.

Make these adjustments to your code:

.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

score 0 · Answer 2 · answered Jan 17 '19 at 19:17

Whatever you want to make scrollable you have to give fixed height

Thus give container a height of y Give header a height of x And scrollable a height of calc(y-x)

Thus with a fixed height and overflow scroll property, scrollable will scroll only leaving header in its place

Add scroll to content only, not header

2 Answers2