CSS - Prevent flex-item from expanding because of child dimensions exceeding that of the flex-item

I want to use a combination of flex-items and elements with static heights inside a flex-container. Everything worked fine, until the flex-items contents height, exceeded that of the flex-item. At that point the entire flex-item expanded vertically and therefore messed upp all of the parent containers.

Can't really seem to get it to work. Se figure and example fiddle.

div.container {
 width: 50%;
 height: 200px;
 display: flex;
 flex-direction: column;
}

div.wrapper div.top {
 width: 100%;
 height: 20px;
}

div.wrapper div.bottom {
 width: 100%;
 flex: 1;
 display: flex;
 flex-direction: column;
}

`

Fiddle:https://jsfiddle.net/Riverans/ewmr3p07/

Figure of desired and achieved results