Flexbox横向滚动画廊问题：子图片超出父容器而非填充高度

我尝试用Flexbox制作可横向滚动的图片画廊，但遇到问题：无法让图片高度填充容器高度的同时保持固定宽高比。卡片数量不固定，代码需要具备灵活性，卡片足够多时能横向滚动。

问题简化示例（建议查看完整页面效果） #

CSS代码 #

body,ul{
margin:0; padding:0;
}

ul.hor-bar{
 background:pink;
 border:1rem solid crimson;
 padding:2rem;
 box-sizing:border-box;
 
 display: flex;
 gap: 2rem;
 height:100vh;
 max-height: 100%;
 overflow-x: scroll;
}

li.card{
  height: 100%;
  max-height: 100%;
  //flex-shrink: 0; 
  display:flex;
  flex-direction: column;

}

p{
  flex:auto;

  /*extra style*/
  background: magenta;
  padding: 0.75rem 0;
  font-weight:bold;
  margin: 0;
}

.img-container{
  height:100%;
  flex:1 ;
  width:auto;
  max-height: 100%; /* <=required */
}

img{
 height:100%;
 width:auto;  /* <=required => or 100% with flex-shrink: 0 */
 object-fit:cover;
}

HTML代码 #

<ul class="hor-bar">
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
</ul>

我知道移除示例中的100vh高度能解决问题，但需要支持动态高度的方案，以下是未使用100vh的示例：

动态高度容器示例 #

CSS代码 #

body,ul{
margin:0; padding:0;

}

.fixed{
  position: fixed;
  padding-top:4rem;
  box-sizing:border-box;
  height: 100%;
  width:100%;
  background: green;
}

ul.hor-bar{
 background:pink;
 border:1rem solid crimson;
 padding:2rem;
 box-sizing:border-box;
 
 display: flex;
 gap: 2rem;
 height:100%;
 
 overflow-x: scroll;
}

li.card{
  height: 100%;
  max-height: 100%;
  //flex-shrink: 0; 
  display:flex;
  flex-direction: column;

}

p{
  flex:auto;

  /*extra style*/
  background: magenta;
  padding: 4vh 0;
  font-weight:bold;
  margin: 0;
}

.img-container{
  height:100%;
  flex:1 ;
  width:auto;
  max-height: 100%; /* <=required */
}

img{
 height:100%;
 width:auto;  /* <=required => or 100% with flex-shrink: 0 */
 object-fit:cover;
}

HTML代码 #

<div class="fixed">
<ul class="hor-bar">
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
  <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
</ul>
</div>

解决方案 #

核心修改点：

• 给.card添加flex-shrink: 0，防止卡片被挤压变形
• 用aspect-ratio给.img-container设置固定宽高比，同时限制其高度为容器可用空间
• 调整img样式，确保填充容器且保持比例

修改后的CSS代码：

body,ul{
margin:0; padding:0;
}

ul.hor-bar{
 background:pink;
 border:1rem solid crimson;
 padding:2rem;
 box-sizing:border-box;
 
 display: flex;
 gap: 2rem;
 height:100vh;
 max-height: 100%;
 overflow-x: scroll;
 /* 确保卡片不换行 */
 flex-wrap: nowrap;
}

li.card{
  height: 100%;
  max-height: 100%;
  /* 禁止卡片收缩，保证横向滚动正常 */
  flex-shrink: 0; 
  display:flex;
  flex-direction: column;
  /* 卡片宽度由图片容器自动决定 */
  width: fit-content;
}

p{
  background: magenta;
  padding: 0.75rem 0;
  font-weight:bold;
  margin: 0;
}

.img-container{
  /* 设置固定宽高比，示例用16:9，可按需修改 */
  aspect-ratio: 16/9;
  /* 占满卡片除文本外的剩余高度 */
  flex: 1;
  overflow: hidden;
}

img{
 /* 完全填充容器 */
 width: 100%;
 height: 100%;
 /* 保持图片比例并覆盖容器 */
 object-fit: cover;
}

说明 #

1. flex-shrink: 0确保卡片不会在空间不足时被压缩，保证横向滚动功能正常
2. aspect-ratio直接定义图片容器的宽高比，无需依赖图片本身的原始尺寸
3. img设置width:100%和height:100%配合object-fit:cover，既填充容器空间又保持图片比例
4. 容器的height可以是任意动态值（比如100%、500px或响应式单位），卡片会自动适应高度，图片始终保持设定的宽高比

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