Flexbox孫子溢出祖父母的身高

我有一個側面導航的flexbox溢出它的granparent的高度。其基本結構是：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的視口的確切規格，變更時到位，可能無法顯示，所以網址爲http://www.webhosting-issues.com

來源

2017-01-28 strasbal

問題不完全清楚給我。有關？ http://stackoverflow.com/q/36247140/3597276 –

它更多的是我希望一切都停留在視圖端口，但內容超過它。我試圖創建的是適合並保持視口高度的側面導航。不知何故，flexbox孫子正在超越祖父母設定的高度。因此，用戶不必使側欄適合視口窗口，而必須滾動才能看到整個事物。我使用圖像的相對單位，所以一切都應縮小以適應視口，但由於某種原因，它不是。 – strasbal

I forked your pen。

評論包含在新筆中，表示/* NEW! */可幫助您追蹤更改的內容，但基本上，由於您已將整個容器的高度設置爲100vh，因此我僅將vh單位的高度設置爲讓他們保持已有高度的頁眉和頁腳，然後用數學填充其他子元素的高度。

總體容器100vh
頭標識和接觸頁腳是19vh每個
這使得62vh的中間部分，由三排
這是20.666vh每排在中間部分

從那裏，爲圖像和它們的內部行的包裝鏈接設置顯式高度，而且你很好走。

您遇到的一個問題是，圖像在鏈接中的文本可能會在較小的屏幕上用完它們的容器。你可以通過將它們放在跨度內並將它們放置在圖像的頂部來解決這個問題，或許使用半透明背景。

希望能爲你工作。

來源

2017-01-28 02:33:10 cjl750

這絕對是驚人的。非常感謝！我甚至沒有想到將大小加起來到容器視口。我將爲手機做一個稍微不同的外觀，所以這正是我需要的。 – strasbal

Flexbox孫子溢出祖父母的身高

回答

相關問題