CSS: why the height of an element expressed in percentage does not work?

I was trying to create a responsive square and added the following: .square { width: 50%; height: 50%; } however, it expands horizontally but vertically does not expand at all… <!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width”> <title>JS Bin</title> <style> body{ background: #cccede; } .square { width: 50%; height: 50%; border: 2px solid…

Details