flexbox问题

Question

我是Flexbox的新手，我创建了以下内容，以便拥有顶部导航，顶部导航下方有三列。当我打开我的HTML文件时，顶部导航为80px高，但三列只有50％，而不是标题的80px。我不明白发生了什么事？这三列不仅应该填补差异吗？

＆＃13;

＆＃13;

body {
  font: 24px Helvetica;
  background: #999999;
}
.layout {
  min-height: 100vh;
  display: flex;
  flex-flow: row;
  flex-wrap: wrap;
}
.top-navigation {
  width: 100vw;
  height: 80px;
  background: #cc2936;

}
.left-sidebar {
  width: 25%;
  background: #dcdcdc;
  flexgrow: 1;
}
.main-outlet {
  width: 50%;
  background: #ffffff;
  flexgrow: 1;

}
.right-sidebar {
  width: 25%;
  background: #dcdcdc;
  flexgrow: 1;
}

＆＃13;

<div class="layout">
  <div class="box top-navigation"></div>
  <div class="box left-sidebar"></div>
  <div class="box main-outlet"></div>
  <div class="box right-sidebar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我认为你需要稍微改变你的布局。然后，您可以将包装div设置为包含flex-direction: column和align-content: stretch三列，如下所示：

body {
  font: 24px Helvetica;
  background: #999999;
  margin: 0;
}
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  flex-flow: row;
  flex-wrap: wrap;
  align-content: stretch;
}
.top-navigation {
  width: 100vw;
  height: 80px;
  background: #cc2936;

}
.left-sidebar {
  width: 25%;
  background: #dcdcdc;
}
.main-outlet {
  width: 50%;
  background: #ffffff;
}
.right-sidebar {
  width: 25%;
  background: #dcdcdc;
}

<div class="box top-navigation"></div>
<div class="layout">
  <div class="box left-sidebar"></div>
  <div class="box main-outlet"></div>
  <div class="box right-sidebar"></div>
</div>