计算器表单仅能横向扩展无法纵向扩展的技术问题

你的问题核心是form元素没有明确的高度约束，导致内部的.column和.display使用height:100%时没有正确的父级参考，进而引发溢出和按钮尺寸失控。以下是调整后的代码和关键修改说明：

关键修改点 #

• 给form设置垂直方向的flex布局，并让它占满container的全部高度，为内部元素提供明确的高度基准
• 将.column和.display的height:100%替换为flex:1，让它们自动平分form的纵向空间
• 优化按钮的flex属性，同时添加最小尺寸限制，避免缩放时按钮过大
• 调整container的宽高设置，使用相对单位保证自适应能力

修改后的代码 #

HTML部分（结构无需改动） #

<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>

CSS部分 #

html {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100%;
    background-color: #f0f0f0;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    height: 70%;
    min-width: 280px;
    min-height: 400px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px;
    box-sizing: border-box;
}

form {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 8px;
}

.column1, .column2, .column3, .column4, .column5, .display {
    display: flex;
    flex: 1;
    gap: 4px;
}

.column1 input, .column2 input, .column3 input, .column4 input, .column5 input, .display input {
    flex: 1;
    min-height: 40px;
    min-width: 40px;
    font-size: 1.2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.display input {
    text-align: right;
    padding: 0 10px;
    font-size: 1.5rem;
}

效果说明 #

• 计算器会自适应container的宽高，横向和纵向都能均匀缩放
• 按钮和显示区会自动平分纵向空间，不会出现溢出或尺寸失控的问题
• 最小尺寸限制保证了窗口缩小时，计算器仍能保持可用的操作尺寸

内容的提问来源于stack exchange，提问作者Pete1230z