CSS面试题：使iframe填充div剩余空间且不改动img默认尺寸

问题需求 #

• 容器<div>内垂直排列<img>和<iframe>
• <img>默认宽高未知，必须保持原有尺寸，不允许显式或隐式修改
• 容器宽度与<img>一致，高度固定为100px
• <iframe>需填充容器剩余空间，且不能超出容器高度

原有方案局限 #

用<div>替代<iframe>时，flex布局可以正常实现需求，但替换为<iframe>后，iframe的默认尺寸会撑开容器，导致图片宽度改变，且iframe超出容器高度。

解决方案 #

通过调整iframe的flex属性和尺寸控制，解决撑开容器的问题：

CSS代码

.container {
    width: fit-content;
    height: 100px;
    border: 1px solid black;
    padding: 0;
    display: flex;
    flex-flow: column;
    overflow: hidden; /* 隐藏超出容器的内容 */
}
.container img {
    flex-shrink: 0; /* 禁止图片被压缩，保留原有尺寸 */
}
.container iframe {
    flex: 1 1 0; /* 填充剩余空间，flex-basis设为0避免默认尺寸干扰 */
    width: 100%; /* 强制宽度继承容器（即图片宽度） */
    border: 0;
}

HTML代码

<div class="container">
    <img src="https://placehold.co/200x50">
    <iframe src="about:blank"></iframe>
</div>

关键说明 #

1. flex-shrink: 0：确保图片不会被flex容器的压缩规则影响，严格保持原有宽高
2. flex: 1 1 0：对iframe设置该属性，其中flex-basis: 0是核心，让iframe基于容器剩余空间分配高度，而非自身默认尺寸，避免撑开容器
3. width: 100%：让iframe宽度完全继承容器（容器宽度由图片决定），保证和图片同宽
4. overflow: hidden：防止iframe内部内容超出容器高度时撑破布局

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