如何让计算器按钮相对于父容器row实现响应式均匀尺寸适配？

要让按钮均匀适配row容器且保持响应式，核心是利用Flex布局的弹性分配特性，同时避免margin和padding导致的布局溢出问题。以下是修改后的CSS方案：

* {
    border: 1px solid black;
    box-sizing: border-box; /* 关键：让边框/内边距包含在元素尺寸内 */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 88vh;
}

.calculator {
    padding: 3vh;
    height: 50vh;
    width: 40vh;
    display: flex;
    flex-direction: column;
}

.display {
    flex: 1;
    display: flex; /* 可选：让显示内容靠右居中 */
    justify-content: flex-end;
    align-items: center;
    padding: 0 1vh;
}

.buttons {
    flex: 6;
    display: flex;
    flex-direction: column;
    gap: 1vh; /* 行与行之间的间距 */
}

.row {
    flex: 1;
    display: flex;
    gap: 1vh; /* 按钮之间的间距，代替按钮的margin */
}

.num{
    flex: 1; /* 关键：让每个按钮平分row的可用宽度 */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0; /* 去掉原有margin，改用row的gap控制间距 */
    padding: 0; /* 去掉原有padding，用flex居中内容 */
    font-size: 1.2em; /* 可选：调整字体大小适配容器 */
}

关键修改说明： #

• box-sizing: border-box：全局设置后，元素的边框和内边距不会额外增加尺寸，确保按钮不会超出row容器。
• .row 使用 gap 代替按钮 margin：避免多个按钮的margin叠加导致行宽溢出，同时统一控制按钮间距。
• .num 设置 flex: 1：每个按钮会自动平分所在row的可用宽度，无论一行有5个还是2个按钮，都能均匀分配空间。
• 按钮用Flex居中内容：替代padding控制按钮大小，确保按钮内的文字始终居中，同时按钮高度会自动适配row的高度（因为row是flex:1，会平分.buttons的高度）。

效果验证： #

• 所有按钮宽度均匀，高度自动适配行高，不会超出容器。
• 计算器整体尺寸随视窗变化（因为用了vh单位），按钮会同步响应缩放。
• 最后一行的两个按钮也会均匀占满整行宽度。

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