저는 계산기를 만들려고 노력 중이고 현재 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%;
} 
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
다음은 구체적인 작동 방법입니다:
으아악