overflow-y: scroll not working under flex layout using flex-basis with percentage values

Question

I have a scrollable div (myitemscontainer), filled with items, inside a page with a couple of flex layouts (fiddle).

.myroot {
  height: 300px;
  display: flex;
  flex-flow: column;
}

.mynav {
  flex: 0 0 10%;
  background-color: gray;
}

.myfoot {
  flex: 0 0 10%;
  background-color: rgb(100, 100, 100);
}

.mymain {
  flex: 0 0 80%;
  background-color: silver;
}

.mymainwrapper {
  height: 100%;
  display: flex;
  flex-flow: column;
}

.mymaintopbar{
  flex: 0 0 20%;
  background-color: yellow;
}

.myitemscontainer{
  overflow-y: scroll;
  flex: 0 0 80%;
  background-color: orange;
}

.myitem{
  height: 50px;
  border-bottom: solid;
}

<div class="myroot">
  <div class="mynav">nav</div>
  <div class="mymain">
    <div class="mymainwrapper">
      <div class="mymaintopbar">top main bar</div>
      <div class="myitemscontainer">
        <div class="myitem"> hello 1</div>
        <div class="myitem"> hello 2</div>
        <div class="myitem"> hello 3</div>
        <div class="myitem"> hello 4</div>
        <div class="myitem"> hello 5</div>
        <div class="myitem"> hello 6</div>
        <div class="myitem"> hello 7</div>
      </div>
    </div>
  </div>
  <div class="myfoot">Footer</div>
</div>

I want to avoid to set the explicit px height of the scrollable (myitemscontainer), I want it to be inherited by the above structure. I am trying to use the flex property, in particular the flex-basis setting percentages (e.g. flex: 0 0 80%, giving 0 to grow and shrink in order to have something that does not change size), but it's not working, and it expand as much as it needs.

I am able to reach my goal using standard height field with percentage instead of the flex / flex-basis (working-fiddle), but I would like to accomplish this using only flex related fields.

Any idea why flex and flex-basis are not working properly?