Q:

multiple scrolling divs in flexbox layout with constrained parent container? 

I am trying to create the following:
a .mainFlex container which contains 3 flex boxes. 

box1 is never going to be very tall.  It needs not to scroll, expand, or shrink.  Lets say it can take up 10% of the container height. 
box2 has variable content.  If it only has a line or two, it should only be as tall as that content.  If it has more, it may expand up to 40% height, leaving a minimum of 50% container height for box3.  Overflow should be scrollable on box2 once its max of 40% container height is reached. 
box3 should take as much as 80%, as little as 50% of parent container height.  Overflow should be scrollable. 

codepen here:
http://codepen.io/JWindels/pen/XbLLop
<div class="container"><div class="row"><div class="FCpanel"><div class="mainFlex col-xs-8"><div class="box1">This is some text</div><div class="box2">some text sdjks sjkhsdkjh sk  sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div><div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div></div><div class="mainFlex col-xs-2 col-xs-offset-1"></div></div></div></div>

My problem:
setting max-heights in percentages do not enable overflow:scroll to function.  However, if I use em measurements for max-height in box2 and box3, I run the risk of having content in box3 that exceeds the height of the parent container, and cannot be seen, even with the scrolling. 

A:

This seems to work properly:
.FCpanel > .mainFlex > .box1 {
  max-height: 10%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box2 {
  max-height: 40%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
  flex: 1;
  overflow: auto;
}

.FCpanel {
  overflow: hidden;
  border-radius: 0.5em;
  margin-bottom: 1em;
}
.FCpanel > .mainFlex {
  background: #ebf6fd;
  box-shadow: 0em 0.125em 0.5875em #666;
  font-family: "OpenSans-Bold", "Open Sans", sans-serif;
  padding: 0px;
  border: solid 1px #428cca;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: flex-start;
  align-items: stretch;
  height: 516px;
  color: #fff;
  font-size: 1.4em;
}
.FCpanel > .mainFlex > .box1 {
  max-height: 10%;
  overflow: auto;
  background-color: #f00;
}
.FCpanel > .mainFlex > .box2 {
  background-color: #0f0;
  max-height: 40%;
  overflow: auto;
}
.FCpanel > .mainFlex > .box3 {
  flex: 1;
  overflow: auto;
  background-color: #00f;
}
<div class="container">
  <div class="row">
    <div class="FCpanel">
      <div class="mainFlex col-xs-8">
        <div class="box1">This is some text</div>
        <div class="box2">some text sdjks sjkhsdkjh sk sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk</div>
        <div class="box3">is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sd sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text
          sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his
          is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sfjk fsdjk his is some text sdjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk sjks sjkhsdkjh sadk;s sjks jsdh dsk shjk sdjkl fsdjkl fsjk jk s</div>
      </div>
      <div class="mainFlex col-xs-2 col-xs-offset-1"></div>
    </div>
  </div>
</div>

Basically, height: auto; flex-basis: auto makes box1 and box2 to be as tall as the content. 
Then max-height prevents them from growing to much. 
Note Flexbox adds auto as the initial value of min-height, so in order to make max-width work properly you can use min-height: 0, or set overflow to anything but visible, which makes min-height: auto behave like min-height: 0. 
In this case I use overflow: auto, which will produce scrollbars only when necessary. 
Finally, setting flex: 1 to box3 makes it grow to fill remaining space (flex-grow: 1), ignoring its contents (flex-basis: 0%). 
Note the boxes will have the default flex-shrink: 1, but they will never shrink because their height won't be greater than 100%.  Feel free to set flex-shrink: 0 if you want to be sure.