如何使div子元素尺寸相对于其父容器正确生效？

问题核心在于父容器仅设置了max-height，没有明确的height值。CSS中百分比高度的计算依赖于父元素的确定高度（而非max-height这类限制属性），所以你的图片会向上寻找有明确高度的祖先（此处为视口），导致尺寸异常并撑开父容器。

解决方案：给父容器设置明确的高度基准 #

因为你希望父容器占屏幕高度的25%，可以直接用vh单位（视口高度的百分比）定义父容器高度，同时保留max-height做上限：

.inputbox-container {
    background-color: red;
    max-width: 40%;
    /* 用vh设置明确高度基准，同时保留max-height做限制 */
    height: 25vh;
    max-height: 25vh;
    border: 0.5px solid grey;
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 10px;
    position: relative;
}

.inputbox-icon {
    /* 现在高度会相对于父容器的25vh计算，即25vh * 80% = 20vh */
    height: 80%;
    /* 防止图片拉伸变形，保持原生宽高比 */
    object-fit: contain;
}

适配父容器高度由其他元素决定的场景 #

如果父容器的高度依赖于上级元素而非直接占视口25%，可以给父容器设置height: 100%，同时确保它的直接父元素也有明确高度：

.inputbox-container {
    background-color: red;
    max-width: 40%;
    height: 100%;
    max-height: 25%;
    /* 其他样式保持不变 */
}

.inputbox-icon {
    height: 80%;
    object-fit: contain;
}

关键原理 #

• 百分比高度生效的前提：父元素必须有明确的height属性值（max-height/min-height无法作为高度计算基准）。
• vh单位直接关联视口高度，适合快速实现“占屏幕X%高度”的需求。
• object-fit: contain可保证图片缩放时不丢失宽高比，避免变形。

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