How to create a completely flexible piano keyboard with HTML and CSS

Question

I\'m trying to create a piano keyboard that will keep it\'s elements ratios using flex box, but can\'t seem to make the black notes stay the same width or height once I star

Answer 1

Percentage height is calculated based on the height of the first positioned parent. In this case, the #keys and #kbd divs don't have a position CSS rule. This means the black keys are scaled based on the width of the body, instead of their direct parent.

Add position: relative; to the #keys div to make it work properly.