Flexbox grandchild overflowing grandparent's height

Question

I have a flexbox in a side navigation that is overflowing it's granparent's height. The basic structure is:

<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%;}

Somehow the flex-rows are not shrinking to fit their grandparent's 100vh. Instead, the images are going outside of the view port. From the articles I've read, I'm not sure if a grandchild takes into consideration it's grandparent's height restrictions, though I'm assuming it would. The actual code is slightly different and can be seen in the following codepen:

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

However I'm not sure the exact specifications of Codepen's viewport, it may not show when changes are put into place, so the site url is http://www.webhosting-issues.com

Question not entirely clear to me. Related? http://stackoverflow.com/q/36247140/3597276 — Michael Benjamin, Jan 28 '17 at 01:31
It's more that I want everything to stay in the view port but the content is extending past it. What I'm trying to create is a side navigation that fits and stays the height of the viewport. Somehow the flexbox grandchild is going past the height set by its grandparent. So instead of having the side bar fit the viewport window, the user has to scroll to see the whole thing. I'm using relative units for the images, so everything should shrink to fit the viewport, but for some reason it's not. — strasbal, Jan 28 '17 at 01:53

score 1 · Accepted Answer · answered Jan 28 '17 at 02:33

I forked your pen.

Comments are included in the new pen that say /* NEW! */ to help you keep track of what changed, but, basically, since you had already set the height of the overall container at 100vh, I simply assigned a height in vh units to the header and footer that let them maintain the heights they already were, and then did the math to fill in the heights of other child elements.

Overall container is 100vh
Header logo and contact footer are 19vh each
That leaves 62vh for the middle section, made up of three rows
That's 20.666vh per row in the middle section

From there, just set explicit heights for the images and their wrapper links for the inner rows, and you’re was good to go.

One problem you run into is that the text in the links by the images can run out of their container on smaller screens. You could fix that by putting them inside spans and positioning them on top of the images, perhaps with a semi-transparent background.

Hope that works for you.

This is absolutely amazing. Thank you so much! I didn't even think of having the sizes add up to the containers viewport. I'm going to do a slightly different look for mobile, so this is exactly what I needed. — strasbal, Jan 29 '17 at 01:08

Flexbox grandchild overflowing grandparent's height

1 Answers1