如何在Flexbox中限制图片在可用空间内显示

云上老周

2026-6-15

问题描述

我正在学习使用Flexbox，想要实现左侧固定宽度导航面板、右侧动态区域的布局。但动态区域里的图片没有被限制在预期空间内，出现了覆盖Audio元素的问题。请问怎么让Flexbox中的图片适配所在区域？动态面板中可能包含多张图片及控件，需要全部适配预期空间。

代码示例

CSS

.myContainer {
    outline: 5px dotted green;
    height: 88vh;
    display: flex;
    gap:25px;
    padding:25px;

}
.doOutline{
    outline: 1px dotted green;
}
.innerContainer{
    display:flex;
    flex-direction:column;
}

HTML

<div class="myContainer">
    <div class="doOutline" style="width:150px;"><p>Fixed Width Nav Panel</p></div>
    <div class="doOutline innerContainer">
        <audio controls src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.mp4"></audio>
        <img src="https://aitutorcdn.blob.core.windows.net/images/BirdChirping.jpeg">
    </div>
</div>

解决方案

先给右侧的innerContainer加上flex: 1，让它占满父容器剩下的空间，避免内容把容器撑得超出父容器高度：
```
.innerContainer{
    display:flex;
    flex-direction:column;
    flex: 1; /* 新增 */
}
```

接着给图片设置样式，限制它的最大宽高，同时保留比例，用object-fit控制图片的显示方式：

.innerContainer img {
    max-width: 100%; /* 不超出容器宽度 */
    max-height: calc(100% - 40px); /* 减去audio控件的高度，确保不会覆盖 */
    object-fit: contain; /* 完整显示图片，保持比例 */
}

更灵活的做法是让图片自动填充剩余空间，给图片加上flex: 1，同时限制宽高：

.innerContainer {
    display:flex;
    flex-direction:column;
    flex: 1;
    gap: 10px; /* 给元素之间加个间距，更美观 */
}
.innerContainer img {
    flex: 1;
    max-width: 100%;
    object-fit: contain;
}

如果动态面板里的内容太多，还可以给innerContainer加overflow: auto，让超出的部分可以滚动：
```
.innerContainer{
    display:flex;
    flex-direction:column;
    flex: 1;
    overflow: auto; /* 新增 */
}
```