Horizontal scroll flexbox - Flex-direction column: child image exceeds height of parent instead of filling height

Question

我正在尝试使用

flexbox

制作一个水平可滚动的图片库，但我无法使图片高度增长以填满容器高度，同时保持固定的纵横比。

卡片的数量是可变的，所以它应该是一些灵活的代码来填充空间并且如果有足够的瓷砖则具有水平滚动。

这里是问题的简化版本（查看完整页面以获得更好的结果）：

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;
}

<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>
   <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
    </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>
   <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
    </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>
   <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 的示例。

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;
}

<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>
   <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
    </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>
   <li class="card">
    <div class="img-container">
      <img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
    </div>
    <p>Card text</p>
  </li>
    </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>
   <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>