Html 3 x 3网格相对于CSS中的视口大小

我正在尝试创建一个3 x 3网格，每个网格的高度和宽度值为30%（我希望避免使用vh、vw和vm单元）：

但是，虽然宽度始终为30%，但高度确实固定在该值，因此，当第一节中的文本比第二节中的文本多时，它最终会更高

---

请参见此处：

我很确定浏览器不接受前面的高度值。使用javascript动态更新绝对高度值

请看这里：

section {
display:inline-block;
padding: 0.5% 0.5%;
margin: 0.5% 0.5%;
box-sizing:border-box;
width: 30%;
height: 30%;
border: #000 solid 1px; 
}