CSS: как изменить размер объекта относительно его родительского объекта ⇐ CSS

[Anonymous]

Я создаю калькулятор, используя необработанный HTML, CSS и JS, и занимаюсь разработкой самого калькулятора. Однако у меня возникла проблема с изменением размера кнопок таким образом, чтобы они оставались отзывчивыми и имели размер относительно «строки» контейнера.
Каков наиболее эффективный способ изменения размера кнопок? чтобы они были ровными, помещались в контейнеры и оставались в соответствующих контейнерах?
Спасибо!

Код: Выделить всё

* {
border: 1px solid black;
}

.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 88vh;
}

.calculator {
padding: 3vh;
height: 50vh;
width: 40vh;
display: flex;
flex-direction: column;

}

.display {
flex: 1;
}

.buttons {
flex: 6;
display: flex;
flex-direction: column;

}

.row {
flex: 1;
display: flex;
justify-content: space-evenly;
}

.num{
margin: 1vh;
position: relative;
padding: 10%;
}

Код: Выделить всё

Calculator



Calculator


1 + 1


7
8
9
-
÷

4
5
6
+
×

1
2
3
CLR
=

0
00

Подробнее здесь: https://stackoverflow.com/questions/791 ... ent-object