Flex box max-height not respected - css

Question

When specifing a flex-box with a max-height of 400px, this max height is not respected if for example the flex-box contains 3 children having min-height: 300px.
In the following snippet, I was expecting the children to have height=400px/3, and display a scrollbar for overflow.
How can I simply achieve this?
.child {
min-height: 300px;
width: 300px;
}
.parent {
display: flex;
flex-direction: column;
max-height: 400px;
}
<div class="parent">
<div class="child" style="background-color:red"></div>
<div class="child" style="background-color:blue"></div>
<div class="child" style="background-color:green"></div>
</div>

Answer 1

For this you need to use another layer/element for the actual contents inside the flex children. These content elements get the min-height, the flex children don't get a height, but (by default) are allowed to shrink in height. overflow: auto; for the children allows a scrollbar to appear:
.parent {
display: flex;
flex-direction: column;
max-height: 400px;
}
.child {
width: 300px;
overflow: auto;
}
.child_contents {
min-height: 300px;
}
<div class="parent">
<div class="child" style="background-color:red">
<div class="child_contents">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>
</div>
<div class="child" style="background-color:blue">
<div class="child_contents">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>
</div>
<div class="child" style="background-color:green">
<div class="child_contents">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>
</div>
</div>

Answer 2

Simply add overflow-y: scroll; to the .parent.
.parent {
display: flex;
flex-direction: column;
max-height: 400px;
overflow-y: scroll;
}
.child {
min-height: 300px;
width: 300px;
}
EDIT
Since you said you want the children to scroll but not the parent, you just have to add overflow-y: scroll to the children and overflow-y: hidden to the parent.
HTML
<div class="parent">
<div class="child" style="background-color:red">
<div class="child_contents">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>
</div>
<div class="child" style="background-color:blue">
<div class="child_contents">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>
</div>
<div class="child" style="background-color:green">
<div class="child_contents">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
</div>
</div>
</div>
CSS
.parent {
display: flex;
flex-direction: column;
max-height: 400px;
overflow-y: hidden;
}
.child {
width: 300px;
overflow-y: scroll;
}
.child_contents {
min-height: 300px;
}
Click here for codepen.

Answer 3

.parent {
display: flex;
flex-direction: column;
max-height: 400px;
overflow: auto;
}