Exact height div with scrollable bottom div, in CSS only?

Question

I'm trying to create a scrollable "widget". A simplified form of which is below.

1. The widget (container) should be a fixed height, 200px.
2. The top of the widget should not have a fixed height.
3. The bottom of the widget should fill the remaining height, any overflow should automatically show a scrollbar if needed.

I believe that this should be possible in CSS only. However, all the Googling that I have done seems to always use fixed heights for some part of the inner workings. This is not what I require.

I am aware that this can be achieved in Javascript. Again, this is not what I want.

Any ideas on how this can be achieved?

.container {
  height: 200px;
  max-height: 200px;
  width: 100%;
  overflow: hidden;
}
.top {
  background-color: #aaaaaa;
}
.bottom {
  background-color: #aaaaff;
  overflow: auto;
}

<div class="container">
  <div class="top">
    This content could
    <br/>well vary
  </div>
  <div class="bottom">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </div>

</div>

Answer 1

It's pretty simple to do this using CSS3 flexboxes.

Just set the parent element to display: flex and add flex-direction: column. In doing so, the scrollbar will be added to the .bottom element rather than the parent container element.

In addition, height: 100% is added to the .bottom element so that it fills the remaining height when there isn't enough content.

.container {
  height: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.top {
  background-color: #aaaaaa;
}
.bottom {
  background-color: #aaaaff;
  height: 100%;
  overflow: auto;
}

<div class="container">
  <div class="top">
    This content could
    <br/>well vary
  </div>
  <div class="bottom">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia nimi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </div>

</div>