如何解決如果flexbox內容太大，頁眉和頁腳不能拉伸？

Question

嘿傢伙我有我的佈局問題。

如果我從數據庫中插入大圖像或大表格，則內容區域不會傳遞頁眉或頁腳。

我想使包裝的主要測量點，並使每個主要元素（在這種情況下，頁眉和頁腳）遵循其寬度。

我知道它可能有一個非常簡單的解決方案，我嘗試了很多東西，但目前爲止沒有任何工作。

任何幫助表示讚賞。

ps .:我知道{img max-width：100％; }是一個解決方案，但我想解決這裏的主要問題。

這裏是我的基本Flexbox的佈局：

HTML

<div class="wrapper"> 
<header>Header</header> 
<div class="nav-container">Nav</div> 
<div class="main"> 
    <div class="aside-1">Aside-1</div> 
    <div class="content">Content</div> 
    <div class="aside-2">Aside-2</div> 
</div> 
<footer>Footer</footer> 
</div> 

CSS

html { 
    height: 100vh; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    background: url(../images/template/bg.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 
body {min-height: 100vh; min-width: 600px; max-width: 1400px; width: 95vw; margin-left: auto; margin-right: auto; margin-top: 20px; } 
header {min-height: 200px; } 
.wrapper {display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } 
.main {display: -ms-flexbox; display: flex; } 
.aside-1 {-ms-flex: 0 0 100px; flex: 0 0 200px; } 
.content {-ms-flex: 1 1 auto; flex: 1 1 auto; min-height: 100vh; text-align: justify; } 
.aside-2 {-ms-flex: 0 0 100px; flex: 0 0 200px; } 
footer {display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; background: #333; height: 45px; padding: 0; margin: 0; } 

* {box-sizing: border-box; } 
/* img {max-width: 100%; } */ 


    /* MEDIA 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
@media (max-width: 800px) { 
    .main {-ms-flex-direction: column; flex-direction: column; } 
    .aside-1 {-ms-flex-order: 1; order: 1; } 
    .content {-ms-flex-order: 2; order: 2; } 
    .aside-2 {-ms-flex-order: 3; order: 3; } 
} 


    /* DEV 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.wrapper, .main, .aside-1, .content, .aside-2, footer {border: 1px solid #F67600;} 

Answer 1

嗯，這對我的作品。你能舉個例子嗎？

html, body{ 
 
    height: 100vh; 
 
    font-size: 12px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
html { 
 
    background: url(http://digitalartanddesign.org/assets/illustrator/images/abstract-background-example.png) no-repeat center center fixed; 
 
    background-size: cover; 
 
} 
 
body { 
 
    min-width: 600px; 
 
    max-width: 1400px; 
 
    width: 95vw; 
 
    margin: auto; 
 
    margin-top: 20px; 
 
} 
 
header { 
 
    min-height: 200px; 
 
} 
 
.wrapper { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
} 
 
.main { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
} 
 
.aside-1 { 
 
    -ms-flex: 0 0 100px; 
 
    flex: 0 0 200px; 
 
} 
 
.content { 
 
    -ms-flex: 1 1 auto; 
 
    flex: 1 1 auto; 
 
    min-height: 100vh; 
 
    text-align: justify; 
 
} 
 
.aside-2 { 
 
    -ms-flex: 0 0 100px; 
 
    flex: 0 0 200px; 
 
} 
 
footer { 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
    background: #333; 
 
    height: 45px; 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100px; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
img { 
 
    max-width: 100%; 
 
} 
 
.wrapper, 
 
.main, 
 
.aside-1, 
 
.content, 
 
.aside-2, 
 
footer { 
 
    border: 1px solid #F67600; 
 
}

<div class="wrapper"> 
 
<header>Header 
 
<img src="https://newevolutiondesigns.com/images/freebies/colorful-background-35.jpg" alt=""></header> 
 
<div class="nav-container">Nav</div> 
 
<div class="main"> 
 
    <div class="aside-1">Aside-1</div> 
 
    <div class="content">Content</div> 
 
    <div class="aside-2">Aside-2</div> 
 
</div> 
 
<footer>Footer</footer> 
 
</div>