CODEWITHSUNDEEP
htmlcssflexbox
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42500

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

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?

Upvotes: 0

Views: 108

Answers (3)

Vincent Lundstr&#246;m
Vincent Lundstr&#246;m

Reputation: 1

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

Upvotes: 0

anderssonola
anderssonola

Reputation: 2195

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

Upvotes: 2

maha
maha

Reputation: 643

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

Upvotes: 0

Related Questions