Question

我在侧面导航中有一个Flexbox，它溢出了它的granparent的高度。基本结构是：

<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。相反，图像将移出视图端口。从我读过的文章中，我不确定孙子是否会考虑祖父母的身高限制，尽管我假设它会。实际代码略有不同，可以在以下代码中看到：

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

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

Answer 1

I forked your pen

评论包含在新笔中，用/* NEW! */来帮助您跟踪更改的内容，但基本上，由于您已经将整个容器的高度设置为100vh，我只需指定一个高度vh单元到页眉和页脚，让他们保持他们已经的高度，然后做数学来填补其他子元素的高度。

整体容器为100vh
标题徽标和联系页脚均为19vh
中间部分留下62vh，由三行组成
中间部分每行20.666vh

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

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

希望对你有用。

Flexbox孙子满溢祖父母的身高

1 个答案: