我正在嘗試製作一個計算器，目前正在研究 HTML 和 CSS。我正在嘗試使計算器在垂直和水平方向上都更大。我可以使用 width: 100% 或 flex: 1 1 100% 輕鬆增加寬度以適應容器；但是，每當我嘗試用 height: 100%; 增加高度時它超出了容器的範圍，輸入按鈕變得很大。我嘗試過使用 flex-basis 和 flex-grow 讓它也垂直增長，但我做不到。
<body>
<div class="container">
<form>
<div class="display">
<input type="text" name="display">
</div>
<div class="column1">
<input type="button" value="AC">
<input type="button" value="+/-">
<input type="button" value="%">
<input type="button" value="/">
</div>
<div class="column2">
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="*">
</div>
<div class="column3">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="-">
</div>
<div class="column4">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="+">
</div>
<div class="column5">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
</div>
</form>
</div>
</body>
html {
height: 100%;
}
body {
display: flex;
justify-content: center;
align-items: center;
margin: 0;
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
height: 50%;
width: 30%;
}
form {
flex: 0 1 100%;
}
.column1, .column2, .column3, .column4, .column5, .display {
display: flex;
height: 100%;
}
.column1 input, .column2 input, .column3 input, .column4 input, .column5 input, .display input {
flex: 1 1 100%;
} 
以下是具體操作方法：
.container{ /* height: 50%; */ width: 100%; } .column1, .column2, .column3, .column4, .column5, .display{ height: calc(100vh/6); /* Distributing the viewport height within 6 columns */ }