在Flexbox布局中如何让Div保持固定宽高比？

问题分析 #

你的代码里给.flex-child设置了固定height: 400px，这会直接覆盖aspect-ratio的自适应逻辑，导致宽高比无法生效。同时垂直flex容器中，flex属性的设置需要配合宽高比的计算，才能让子元素在可用空间内保持比例且不溢出。

修正后的代码 #

CSS部分

* {
    box-sizing: border-box;
}

html {
    height: 100%;
}

body {
    font-family: Verdana, sans-serif;
    font-size: 0.8em;
    height: 100%;
    margin: 0; /* 移除默认边距，避免容器溢出视口 */
}

.flex-parent {
    display: flex;
    flex-direction: column;
    color: black;
    gap: 8px;
    height: 100%;
    padding: 8px; /* 可选，避免子元素贴边 */
}

.flex-child {
    flex: 1 1 0; /* 让子元素平均分配剩余空间，允许收缩 */
    border: 2px solid black;
    aspect-ratio: 3 / 1; /* 简化1200:400的比例 */
    max-width: 100%; /* 限制宽度不超过容器 */
    max-height: 100%; /* 限制高度不超过分配的空间 */
    margin: 0 auto; /* 水平居中，可选 */
    overflow: hidden; /* 裁剪超出内容，符合需求 */
}

/* 实现类似object-fit:contain的内部内容适配 */
.flex-child .content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

HTML部分

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="flex-parent">
        <p>Some text</p>
        <div class="flex-child">
            <div class="content">
                <!-- 内部内容区域 -->
            </div>
        </div>
        <div class="flex-child">
            <div class="content">
                <!-- 内部内容区域 -->
            </div>
        </div>
    </div>
</body>
</html>

关键调整说明 #

• 移除固定高度：删除.flex-child的height: 400px，让aspect-ratio能根据可用空间自动计算尺寸。
• 调整flex属性：flex: 1 1 0确保两个子元素平均分配p标签剩余的容器空间，同时允许在空间不足时收缩。
• 简化宽高比：aspect-ratio: 3/1等价于1200:400，写法更简洁。
• 限制最大尺寸：max-width:100%和max-height:100%保证子元素不会超出容器范围，避免溢出。
• 内部内容适配：通过内部.content容器的flex布局，实现类似object-fit:contain的居中缩放效果，确保内部内容按比例适配父容器。

内容的提问来源于stack exchange，提问作者Jean-yves Leseigneur