我正在尝试制作一个计算器，目前正在研究 HTML 和 CSS。我正在尝试使计算器在垂直和水平方向上都更大。我可以使用 width: 100% 或 flex: 1 1 100% 轻松增加宽度以适应容器；但是，每当我尝试用 height: 100%; 增加高度时它超出了容器的范围，输入按钮变得很大。我尝试过使用 flex-basis 和 flex-grow 让它也垂直增长，但我做不到。

    

            

                

                    
                
                

                    
                    
                    
                    
                
                

                    
                    
                    
                    
                
                

                    
                    
                    
                    
                
                

                    
                    
                    
                    
                
                

                    
                    
                    
                
            
    



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%;
}