Fink IT
Published in

Fink IT

Why is height not working?

Parent does not stretch to child’s height.

I want height to be 100% of the viewport.

Why is element overflowing even though I’ve my height set?

Difference between width and height

Width

Element would take 50% of the default width.

Height

The parent’s height is set to 100px, so the element can be 50% tall of that value

I have my measures correct, but it still looks messy?

Here comes a little telltale about box sizing.

Margin, padding and border
width is 50% — 2 times margin 15px

Box-sizing

Box-sizing set to border-box

Relative yet defined workaround(s)

VH and VW

Source: caniuse.com

EM and REM

38.4px

You have to be careful with em, because it set the value based on the direct parent’s value, which can be also derived from the latter’s ancestors.

Flexbox

Conclusion

--

--

Not working and you don’t know why? I don’t either. Let’s fink together.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Magda Odrowąż-Żelezik

Creative front end developer, currently excited about learning 3D graphics. Visit magdazelezik.com