Question: I added a `min-height` on a `div` in a flex layout parent. It seems that the `min-height` impacts the `div` if its real height is greater than `min-height`. 
Take below code as an example:

<https://codepen.io/zhaoyi0113/pen/ejwJGM>

I set `100px` as min-height on the `div` but it gets overlay each other if its real height is greater than 100. In above case, I expect the `div` shows `hello` `world` in one block but it doesn't. If you inspect the dom structure you will find that the `<p>` doesn't extend its parent `div` height. How can I fix it?

Answer: 
Since you've set height 200px on the `.div1` flex box tries to fit all the child elements inside 200px, but the min-height prevents it to fit all children within the 200px. 

Depending on what you want to achieve you might want to change the height on the `.div1` or add `flex-shrink: 0` on `.div2`
Alternative solution is to add `display: table;` to your div2.