Chromeフレックスボックス100％高さ内100％高さフレックスボックスオーバーフロー

フレックスボックスを使用してフルハイトページを作成しようとしていますが、フレックスボックスも使用しています。ページは、example of what it should look likeのようになります。青のdivは動的で高さが変わる可能性があり、赤のコンテンツはコンテンツdivの残りの領域を占有する必要があります。これはFirefoxとIEの両方で動作しますが、Chromeではオーバーフローします。 Chromeでオーバーフローする理由を誰かが説明できますか？次のようにChromeフレックスボックス100％高さ内100％高さフレックスボックスオーバーフロー

HTMLは次のとおりです。

<body> 
    <div class="container"> 
     <div class="navbar">Navbar</div> 
     <div class="content"> 
      <div class="container"> 
       <div class="fill"></div> 
       <div class="dynamic">Here is some dynamic content<br>Test</div> 
      </div> 
     </div> 
    </div> 
</body>

をとCSSは次のとおりです。ここで

body{ 
    margin:0; 
} 
.container{ 
    display: flex; 
    flex-direction: column; 
    width: 100%; 
    height: 100%; 
} 
.navbar{ 
    background-color: #ccc; 
    flex: none; 
} 
.content{ 
    background-color: #333; 
    flex: auto; 
    padding: 10px; 
} 
.dynamic{ 
    background-color: #0066ff; 
    flex: none; 
} 
.fill{ 
    flex: auto; 
    background-color: #ff0000; 
}

出典

2016-06-15 LasershowJack

'ボックスのサイズ変更追加：ボーダー・ボックスを、こんにちは.content' – SeinopSys

が更新スニペットです。

高さを自動的に調整する必要がある容器には、flex:1を使用してください。

body { 
 
    margin: 0; 
 
} 
 
.container1 { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.navbar { 
 
    background-color: #ccc; 
 
} 
 
.content { 
 
    flex: 1; 
 
    background-color: #ff0000; 
 
    border: 10px solid #333; 
 
    border-bottom: none; 
 
} 
 
.dynamic { 
 
    background-color: #0066ff; 
 
    border: 10px solid #333; 
 
    border-top: none; 
 
}

<body> 
 
    <div class="container1"> 
 
    <div class="navbar">Navbar</div> 
 
    <div class="content"> 
 
    </div> 
 
    <div class="dynamic">Here is some dynamic content 
 
     <br>Test</div> 
 
    </div> 
 
</body>

出典

2016-06-15 07:08:02 Pugazh

'にあなたの答えに感謝を '、しかし問題は、コンテンツのdiv内のコンテナdiv要素が動的にロードされるということですしたがって、このコンテナのdiv内にまだあるはずです。見た目のHTML構造を維持することは可能ですか？まだChromeでオーバーフローしていないのですか？ – LasershowJack

Chromeフレックスボックス100％高さ内100％高さフレックスボックスオーバーフロー

答えて

関連する問題