Css Flexbox外孙的身高超过了祖父母的身高

我有一个flexbox在一个侧导航，是溢出它的高度。基本结构是：

<div class="holder">
  <div class="block-item">content</div>
  <div class="flex-nav">
   <div class="flex-row"><img src="#"><img src="#"></div>
   <div class="flex-row"><img src="#"><img src="#"></div>
   <div class="flex-row"><img src="#"><img src="#"></div>
   <div class="block-item">content</div>
  <div>

.holder { height: 100vh;}
.block-item { display: block;}
.flex-nav { display: flex;  flex-flow: column;}
.flex-row { flex: 1 1 0; display: flex;}
img { max-width: 100%;}

不知何故，弹性行没有缩小到适合他们祖父母的100vh。取而代之的是，图像在视图端口之外。从我读到的文章来看，我不确定孙辈是否考虑了祖父母的身高限制，尽管我认为会。实际代码略有不同，可以在以下代码笔中看到：

但是，我不确定Codepen的视口的确切规格，它可能不会在更改到位时显示，因此站点url是

新笔中包含的注释为/*new！*/为了帮助您跟踪更改的内容，但是，基本上，由于您已经将整个容器的高度设置为100vh，我只需为页眉和页脚指定一个以vh为单位的高度，使其保持原来的高度，然后进行数学运算，以填充其他子元素的高度

整个集装箱为100vh 页眉徽标和联系人页脚各为19vh 中间部分有62vh，由三行组成 中间段每排20.66 6VH。 从这里开始，只需为图像设置明确的高度，并为内部行设置包装器链接，就可以了

您遇到的一个问题是，图像链接中的文本可能会在较小的屏幕上用完容器。您可以通过将它们放在跨距内，并将它们放置在图像顶部（可能使用半透明背景）来解决这一问题

---

希望这对你们有用。

这个问题我不太清楚。相关的更重要的是，我希望所有内容都留在视图端口中，但内容正在扩展。我试图创建的是一个侧面导航，它适合并保持视口的高度。不知何故，flexbox的孙辈已经超过了祖父母设定的身高。因此，用户不必让侧栏与视口窗口匹配，而需要滚动查看整个内容。我对图像使用相对单位，所以所有的东西都应该缩小以适应视口，但由于某些原因它不是。这绝对是令人惊讶的。非常感谢你！我甚至没有想到将大小添加到容器视口中。我将为手机做一个稍微不同的外观，所以这正是我所需要的。