Scrollable Internal Content

If you want an internal component to shrink between a header / footer and have content be scrollable. Using Flexbox to fill a view height dynamically.

by stephencweiss

HTML

<div class="page-wrapper">
  <div class="flexbox-item header">
    Nav <br />
    Header
  </div>

  <div class="component-wrapper">
    <div>
    page Header
    </div>
    <div class='table-wrapper fill-area content flexbox-item-grow'>
      <div class='table-body flexbox-item fill-area content'>
        Content
        <br /><br />
        Emulates height 100% with a horizontal flexbox with stretch
        <br /><br />
        This box with a border should fill the blue area except for the padding (just to show the middle flexbox item).
        <br /> <br />
        "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."
        <br /> <br />
        "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."
        <br /> <br />
        "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."
        <br />...

CSS

*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;
}

body {
  background: #444444;

  color: #cccccc;
  font-size: 14px;
  /* Helvetica/Arial-based sans serif stack */
  font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

}

.page-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.component-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.table-wrapper {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.flexbox-item {
  padding: 8px;
}

.flexbox-item-grow {
  flex: 1;
}

.flexbox-item.header {
  background: rgba(255, 0, 0, .3);
}

.flexbox-item.footer {
  background: rgba(0, 255, 0, .1);
}

.flexbox-item.content {
  background: rgba(0, 0, 255, .1);
}

.fill-area {
  overflow: auto;
}

.table-body {
  height: 100%;
}
.fill-area-content {
  background: rgba(0, 0, 0, .3);
  border: 1px solid #000000;

  /* Needed for when the area gets squished too far and there is content that can't be displayed */
  overflow: auto;
}