css - Flexbox 孙子溢出祖 parent 的高度

Question

我在侧面导航中有一个 flexbox，它溢出了它的祖 parent 的高度。基本结构是:

<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 行并没有缩小以适应祖 parent 的 100vh。相反，图像会超出视口(viewport)。从我读过的文章来看，我不确定孙子是否考虑到祖 parent 的高度限制，尽管我假设会。实际代码略有不同，可以在以下codepen中看到:

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

但是我不确定 Codepen 视口(viewport)的确切规范，当更改到位时它可能不会显示，所以站点 url 是 http://www.webhosting-issues.com

Answer 1

I forked your pen .

注释包含在新笔中，上面写着 /* NEW! */ 以帮助您跟踪更改的内容，但是，基本上，由于您已经将整个容器的高度设置为 100vh，我只是为页眉和页脚分配了一个以 vh 为单位的高度，让它们保持不变它们已经达到的高度，然后计算填充其他子元素的高度。

• 整体容器为100vh
• 页眉 Logo 和联系页脚各 19vh
• 中间部分剩下 62vh，由三行组成
• 中间部分每行 20.666vh

从那里开始，只需为图像及其内部行的包装器链接设置明确的高度，就可以了。

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

希望对你有用。