Расширяемый DIV в зависимости от области просмотра

Я пытаюсь сделать div, ширина и высота которого будут пропорционально уменьшаться или расширяться в зависимости от области просмотра. Как вы можете видеть в приведенном выше примере, этот метод заставит мой div расширяться только по горизонтали, но не по вертикали (фиксированная высота). Если я попытаюсь указать проценты для значений высоты моей оболочки или main_content, браузер просто проигнорирует значения высоты, если они не указаны в пикселях или ems. Как я могу заставить это работать? В моей голове, если бы я мог просто указать высоту моего div в процентах, это решило бы проблему, верно?

<div class=".wrapper">
  <div id="main_content"></div>
<div>

.wrapper{
   width: 80%;
   margin : 0 auto;
}

#main_content{
  width : 100%;
  height : 500px;
}