Flexbox孙子溢出祖父母的高度

Question

我在侧边导航中有一个 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%;}

不知何故，flex-rows 并没有缩小以适应其祖父母的 100vh。相反，图像超出了视口。从我读过的文章中，我不确定孙子是否考虑到祖父母的身高限制，尽管我假设它会。实际代码略有不同，可以在下面的codepen中看到：

http://codepen.io/strasbal/pen/zNEMpj?editors=1100

但我不确定 Codepen 视口的具体规格，它可能不会显示更改何时到位，因此网站 url 是 http://www.webhosting-issues.com

Answer 1

I forked your pen.

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

• 整个容器为 100vh
• 页眉徽标和联系人页脚各为 19vh
• 剩下 62vh 留给中间部分，由三行组成
• 中间部分每行 20.666vh

从那里，只需为图像设置明确的高度，并为内部行设置它们的包装链接，就可以了。

您遇到的一个问题是图像链接中的文本可能会在较小的屏幕上超出其容器。您可以通过将它们放置在 span 中并将它们放置在图像顶部来解决这个问题，也许有一个半透明的背景。

希望对你有用。