Why does `min-height` impact the height of a div in flex layout?

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 1

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

Answer 2

try changing the height of the paragraph to inherit.

p {
  height: inherit;
}

this will make it inherit the height from its parent.

see the result here

Answer 3

Alternative solution is to add display: table; to your div2.