Web | FlexBox | Restricted flex item height without explicit constraint

This example demonstrates how to restrict flexbox item height without any explicit (relative, or absolute) constraint. In more detail: Given a flex container with multiple items. The content of a certain item is alone taller than the desired height of the entire container. The height of this specific flex item is restricted moreover its content made scrollable.

by Zoltan Boros

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<body>
  <div class="flexContainer">
    <div class="header">Header</div>
    <div class="content">
      <div>Content - Some short item.</div>
      <div>
        Content - Some long item 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div>
        Content - Some long item 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
    <div class="footer">Footer</div>
  </div>
</body>

CSS

/* Significant CSS declarations */

.flexContainer {
  height: 300px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
  overflow: auto;
}

/* Aesthetic CSS declarations  */

* {
  box-sizing: border-box;
}

.flexContainer {
  border: 2px dotted #000;
  background-color: #eee;
  padding: 0.5em;
  
  & > div {
    padding: 0.5em;
  }
}

.header {
  border: 2px dashed #88f;
}

.content {
  border: 2px dashed #f88;
  
  & > div {
    width: 200px;
    padding: 0.5em 0;
  }
}

.footer {
  border: 2px dashed #080;
}