html - 如何解决 flexbox 内容太大，页眉和页脚不拉伸(stretch)？

Question

大家好，我的布局有问题。

如果我从数据库中插入一个大图像或一个大表格，内容区域会拉伸(stretch)到页眉和页脚之上。

我想让 wrapper 成为主要测量点，并让每个主要元素(在本例中为页眉和页脚)跟随其宽度。

我知道它可能有一个非常简单的解决方案，我尝试了很多方法，但到目前为止没有任何效果。

感谢任何帮助。

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>