フレックスボックスの孫が祖父母の高さをあふれている

Question

親展の高さがオーバーフローしているサイドナビゲーションにフレックスボックスがあります。基本的な構造は次のとおりです。

<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に収まるように縮小していません。代わりに、画像はビューポートの外に出ています。私が読んだ記事から、孫が祖父母の身長制限を考慮しているかどうかはわかりませんが、私はそれを推測しています。実際のコードは、わずかに異なっており、以下のcodepenで見ることができます。

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

私はCodepenのビューポートの正確な仕様はわかりませんが、変更が所定の場所に置かれたときに、それが表示されない場合があります、ので、サイトのURLはhttp://www.webhosting-issues.com

Answer 1

I forked your penです。

コメントは、変更された内容を把握するのに役立つと言われる新しいペンに含まれていますが、基本的には、コンテナ全体の高さを100vhに設定しているので、ヘッダーとフッターを使用して、すでにそれらの高さを維持し、次に他の子要素の高さを埋めるために数学を行いました。

• 総合容器は、100VH
• ヘッダロゴと接触フッタであるである19vh各中間部
に行ごと20.666vhだ三列
• から構成される、中央セクションの62vh葉

そこから、画像とその内側の行のラッパーリンクの明示的な高さを設定するだけです。

あなたが遭遇する問題の1つは、画像によるリンク内のテキストが小さな画面でコンテナから使い果たされることです。あなたはそれらをスパンの内側に置き、それらを画像の上に置くことによって、おそらく半透明の背景でそれを修正することができます。

希望はあなたのために働く。