Почему не работает height в % для inline-block?

body {height: 500px;}

.vse {
  display: inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
  width: 20%; /* устанавливаем ширину элемента */
  max-height: 50%;
  min-height: 20%; /* устанавливаем высоту элемента */
  height: 50%;
}
.test {
  background-color: red; /* задаем цвет заднего фона */
}
.test2 {
  background-color: green; /* задаем цвет заднего фона */
}
.test3 {
  background-color: blue; /* задаем цвет заднего фона */
}
.test4 {
  background-color: yellow; /* задаем цвет заднего фона */
}

<div class="vse">
  <div class="test"></div>
  <div class="test2"></div>
  <div class="test3"></div>
  <div class="test4"></div>
</div>