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

The position should be relative rather than absolute. Also you should set both the height of the containing divs to 100%.

Refer to the Fiddle link: http://jsfiddle.net/924sefae/6/

#kbd {
  height: 100%;
  ...
}
#kbd {
  height: 100%;
  ...
}

.black {
  position: relative;
  ...
}