html - 嵌套 Flexboxes 中图像的奇怪行为

Question

我在构建图库显示页面时遇到问题。

我在这里重现了我的问题

.containerOuter {
  display:flex;
  flex-direction:column;
  height:70vh;
}
.containerInner {
  display:flex;
  flex-direction:column;
  padding:30px;
  min-height:0;
}
ul {
  display:flex;
  min-height:0;
}
img {
  height:100%;
  width:auto;
}
.footnote {
  padding:30px 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<div class="containerOuter">
  <div class="containerInner">
    <ul>
      <li><img src="https://via.placeholder.com/500/09f/fff"/></li>
      <li><img src="https://via.placeholder.com/600/51f/fff"/></li>
      <li><img src="https://via.placeholder.com/400/56f/fff"/></li>
      <li><img src="https://via.placeholder.com/700/512/fff"/></li>
    </ul>
    <div class="footnote">Footnote at the bottom</div>
  </div>
</div>

本质上，我有一个 flexbox containerOuter(列)，里面有另一个 flexbox containerInner(列)。在这里面，第三个 flexbox(行)。第三个 flexbox 是包含图像的 LI 水平列表。

我的要求是根据视口(viewport)高度(例如 60vh)设置 containerOuter 的高度，并调整 innerContainer 和 LIs他们的高度来填充这个容器的高度 - 图像相应地调整他们的高度，没有失真。

这听起来应该不会太麻烦吧？但我真的很难让它发挥作用。

正如您从 CodePen 中看到的那样，图像有时似乎会缩小，但包含的 LI 保留了它们包含的全尺寸图像的宽度。有时当你刷新页面时，你会得到一个完全不同的布局。此外 - Safari 想要拉伸(stretch)图像的宽度以填充包含 LI。

请帮忙 :) 非常感谢。

Answer 1

如果我理解你的目标是正确的，你只需要删除你拥有的大部分 CSS，并将每个容器的高度设置为 100%(其父容器的 100%)，包括 img 标签。如果元素的父项具有设置的高度，则元素仅响应 100% 高度:

.containerOuter {
  height:70vh;
}
.containerInner, ul, li, img {
  height: 100%;
}
.containerInner {
  padding:30px;
}
ul {
  display:flex;
}

.footnote {
  padding:30px 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<div class="containerOuter">
  <div class="containerInner">
    <ul>
      <li><img src="https://via.placeholder.com/500/09f/fff"/></li>
      <li><img src="https://via.placeholder.com/600/51f/fff"/></li>
      <li><img src="https://via.placeholder.com/400/56f/fff"/></li>
      <li><img src="https://via.placeholder.com/700/512/fff"/></li>
    </ul>
    <div class="footnote">Footnote at the bottom</div>
  </div>
</div>