Scrolling within a div with a fixed header

Question

I have the following snippet in my page:

<div class="main">
    <div class="header">
        <div class="heading">Heading</div>
        <div>Arbitrary amount of header content.</div>
    </div>
    <div class="body">
      <div>Arbitrary amount of body content.</div>
    </div>
</div>

I would like for the .body within the .main div to be vertically scrollable, while the .header remains at the top.

I've put together a short example using JSFiddle with the whole .main scrollable.

I have searched and looked for other solutions but they all seem to either involve having a fixed header height (which I do not) or using some horrible table structure (like in this JSFiddle).

Edit: A few other restrictions: the solution needs to support IE9 and be responsive (i.e. .main should work regardless of it's height.)

Answer 1

Make the parent a flex column, set .body to flex-grow: 1 and overflow-y: scroll

.main {
  width: 500px;
  height: 400px;
  background-color: rgba(255, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
}
.header {
  background-color: rgba(0, 0, 255, 0.1);
  padding: 8px;
}
.header .heading {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
.body {
  padding: 8px;
  flex: 1 0 0;
  overflow-y: scroll;
}

<div class="main">
    <div class="header">
        <div class="heading">Heading</div>
        <div>Arbitrary amount of content</div>
    </div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis volutpat eros euismod ultricies. Mauris non faucibus tellus, quis iaculis eros. Aenean eu accumsan ex. Phasellus fringilla congue turpis sed rutrum. Nulla porttitor ornare consequat. Quisque scelerisque arcu nec dignissim malesuada. Nullam finibus ligula dolor, nec sodales lacus finibus eu. Quisque scelerisque tortor et ante malesuada ullamcorper. Aliquam at condimentum lectus. Integer dictum tempus odio, sit amet molestie augue mattis scelerisque. Ut sed euismod sapien.</p>
      <p>Nunc tempus blandit nisl, maximus porttitor erat tempor quis. Donec lectus lorem, sagittis ut molestie id, porta eget dolor. Donec placerat finibus commodo. Fusce euismod rhoncus diam id porttitor. Aliquam magna est, auctor quis lorem in, fermentum finibus libero. Mauris aliquam lacus sit amet libero facilisis vehicula vitae consequat velit. Aliquam erat volutpat. Proin vel volutpat enim. Nulla dolor ipsum, maximus quis ante ut, malesuada efficitur mi. Aenean quis mi ut mi convallis pulvinar. Suspendisse pulvinar ante vitae cursus dictum. Duis vehicula venenatis magna sed porttitor. Phasellus vitae risus finibus, pulvinar ligula sed, feugiat augue. Suspendisse potenti.</p>
      <p>Nunc in nibh purus. Sed nec dui nibh. Morbi iaculis viverra diam at finibus. Fusce sollicitudin volutpat libero, id luctus nunc volutpat quis. Fusce pretium in magna vel lobortis. Nam volutpat ultricies lacus ac consequat. Integer cursus, nunc ut lobortis luctus, dolor arcu aliquet leo, eget faucibus dui sem ut nisl. Ut at urna metus. Morbi quis rhoncus quam, vel faucibus enim. Duis sed nisi non lacus volutpat fermentum. In ultrices nisl ut odio tincidunt, eu maximus lectus ultricies. Phasellus sit amet faucibus sem. Donec at enim finibus, aliquam diam vitae, rutrum risus. Duis finibus ultrices imperdiet.</p>
    </div>
</div>

You could also just set a height or max-height on .body, then add overflow-y: scroll and it will scroll.

.main {
  width: 500px;
  background-color: rgba(255, 0, 0, 0.1);
}
.header {
  background-color: rgba(0, 0, 255, 0.1);
  padding: 8px;
}
.header .heading {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: bold;
}
.body {
  padding: 8px;
  max-height: 300px;
  overflow-y: scroll;
}

<div class="main">
    <div class="header">
        <div class="heading">Heading</div>
        <div>Arbitrary amount of content</div>
    </div>
    <div class="body">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu felis volutpat eros euismod ultricies. Mauris non faucibus tellus, quis iaculis eros. Aenean eu accumsan ex. Phasellus fringilla congue turpis sed rutrum. Nulla porttitor ornare consequat. Quisque scelerisque arcu nec dignissim malesuada. Nullam finibus ligula dolor, nec sodales lacus finibus eu. Quisque scelerisque tortor et ante malesuada ullamcorper. Aliquam at condimentum lectus. Integer dictum tempus odio, sit amet molestie augue mattis scelerisque. Ut sed euismod sapien.</p>
      <p>Nunc tempus blandit nisl, maximus porttitor erat tempor quis. Donec lectus lorem, sagittis ut molestie id, porta eget dolor. Donec placerat finibus commodo. Fusce euismod rhoncus diam id porttitor. Aliquam magna est, auctor quis lorem in, fermentum finibus libero. Mauris aliquam lacus sit amet libero facilisis vehicula vitae consequat velit. Aliquam erat volutpat. Proin vel volutpat enim. Nulla dolor ipsum, maximus quis ante ut, malesuada efficitur mi. Aenean quis mi ut mi convallis pulvinar. Suspendisse pulvinar ante vitae cursus dictum. Duis vehicula venenatis magna sed porttitor. Phasellus vitae risus finibus, pulvinar ligula sed, feugiat augue. Suspendisse potenti.</p>
      <p>Nunc in nibh purus. Sed nec dui nibh. Morbi iaculis viverra diam at finibus. Fusce sollicitudin volutpat libero, id luctus nunc volutpat quis. Fusce pretium in magna vel lobortis. Nam volutpat ultricies lacus ac consequat. Integer cursus, nunc ut lobortis luctus, dolor arcu aliquet leo, eget faucibus dui sem ut nisl. Ut at urna metus. Morbi quis rhoncus quam, vel faucibus enim. Duis sed nisi non lacus volutpat fermentum. In ultrices nisl ut odio tincidunt, eu maximus lectus ultricies. Phasellus sit amet faucibus sem. Donec at enim finibus, aliquam diam vitae, rutrum risus. Duis finibus ultrices imperdiet.</p>
    </div>
</div>