I need to have a div that contains three divs. The top and the bottom ones are fixed (but unknown in advance) size, while the middle one takes the remaining height of the parent div. In addition, the middle div has title and content, with a scrollbar on the content if overflowed.

Based on this post, here is what I have:

#outer {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#inner_fixed {
    height: 150px;
    background-color: grey;
}

#inner_remaining {
    background-color: #DDDDDD;
    overflow-y: auto;
    flex-grow: 1;
}

<div id="outer">
   <div id="inner_fixed">
      I have a fixed height
   </div>
   <div id="inner_remaining">
      <h1>
         I stay in place.
      </h1>
      <h2>
         I participate in scrolling.
      </h2>
      <h2>
         I participate in scrolling.
      </h2>
      <h2>
         I participate in scrolling.
      </h2>
      <h2>
         I participate in scrolling.
      </h2>
      <h2>
         I participate in scrolling.
      </h2>
   </div>
   <div id="inner_fixed">
      I have a fixed height
   </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

How can I modify this, so that only the content of the middle div below the <h1> title would have the scrollbar? Here is the Fiddle.

CodePudding user response：

I went ahead and added a flex display to your #inner_remaining ID. I also added flex-direction: column;

In order to get the scroll bar to be fixed within the scrollable content I added the following to your CSS:

* {
  flex-grow: 1;
}
div {
  overflow-y: auto;
}

For demonstration purposes, I added twice the amount of participating in scrolling <h2>'s

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}

#outer {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#inner_fixed {
  height: 150px;
  background-color: grey;
}

#inner_remaining {
  background-color: #DDDDDD;
  overflow-y: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
 }

/* additions */
* {
  flex-grow: 1;
}

div {
  overflow-y: auto;
}

<div id="outer">
  <div id="inner_fixed">
    I have a fixed height
  </div>
  <div id="inner_remaining">
    <h1>
    I stay in place.
    </h1>
    <div>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    <h2>
    I participate in scrolling.
    </h2>
    
    </div>
  </div>
  <div id="inner_fixed">
    I have a fixed height
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>