Ich versuche einen Taschenrechner zu erstellen und arbeite derzeit an HTML und CSS. Ich versuche, den Rechner sowohl vertikal als auch horizontal zu vergrößern. Ich kann die Breite leicht an den Container anpassen, indem ich „width: 100 %“ oder „flex: 1 1 100 %“ verwende. Wenn ich jedoch versuche, die Höhe mit „height: 100 %“ zu erhöhen, überschreitet sie die Grenzen des Containers und der Eingabetaste wird riesig. Ich habe versucht, es mit Flex-Basis und Flex-Grow auch vertikal wachsen zu lassen, aber es gelingt mir nicht.
<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%;
} 
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
以下是具体操作方法：
.container{ /* height: 50%; */ width: 100%; } .column1, .column2, .column3, .column4, .column5, .display{ height: calc(100vh/6); /* Distributing the viewport height within 6 columns */ }