CSS Flex布局子项无法填满父容器及底行偏移问题咨询

核心问题根因 #

• 伸缩属性配置缺失：.calculator设了固定400px高度，但直接子元素.content未配置flex: 1抢占剩余垂直空间；每一行按钮容器.row也未配置flex: 1均分垂直高度，最终导致按钮区无法填满父容器。
• 类名匹配错误：CSS中定义的.display显示屏样式直接挂在了input元素上，外层包裹的.screen容器无任何样式，显示屏区域高度不受控，挤压按钮区布局空间。
• 按钮margin配置错误：.button设置了margin: 0 auto，该属性会优先计算左右外边距抢占剩余空间，直接抵消flex: 1的拉伸效果，既导致按钮无法填满整行，也让最后一行按钮出现微小偏移。
• 冗余属性干扰：.calculator和.content都是纵向列布局，多余的flex-wrap: wrap配置会干扰子元素尺寸计算，引发布局异常。
• 盒模型问题：按钮设置了1px边框但未全局配置border-box，边框宽度会额外叠加在元素尺寸外，导致每行总宽度溢出父容器，出现对齐偏差。
• 全局样式冲突：全局button选择器配置了粉色背景、白色文字、12px字号，和计算器按钮需要的白背景、黑字、20px字号样式冲突，显示异常。

可直接复用的修复后代码 #

CSS部分 #

html {
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: inherit;
}

body {
    background-color: #d2a5a5;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.calculator {
    background-color: #fff;
    border: 6px solid rgb(1, 1, 1);
    border-radius: 10px;
    width: 300px;
    height: 400px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 5px;
}

.screen {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    padding: 0 10px;
}

.display {
    width: 100%;
    border: none;
    text-align: right;
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

.calculator .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.calculator .row {
    display: flex;
    flex: 1;
}

.calculator .row .button {
    background-color: #fff;
    border: 1px solid #ccc;
    margin: 0;
    padding: 0;
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    color:rgb(1, 1, 1);
    cursor: pointer;
}

.calculator .row .button.zero {
    flex: 2;
}

.calculator .row .button:hover {
    background-color: #ccc;
}

HTML部分无需改动，原有结构可直接适配上述CSS #

修复效果验证 #

• 按钮区域完全填满计算器除显示屏外的所有内容空间，无多余留白
• 最后一行0、小数点、等号按钮与上方行完全对齐，无微小偏移
• 所有按钮尺寸均匀，hover交互效果正常

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