CSS Flexbox 边框在 100vh 时被切断？如何让盒子全屏？

Question

我正在使用 normalize css 3.0.3，我的 flexbox css 是这样的:

.container {
  display: flex; 
  border: 10px solid goldenrod;
  min-height: 100vh; /* height 100%*/
  flex-direction: row;
}

.box {
    color: white;
    font-size:100px;
    text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
    padding:10px;
}

.box1 { background:#1abc9c; }
.box2 { background:#3498db; }
.box3 { background:#9b59b6; }
.box4 { background:#34495e; }
.box5 { background:#f1c40f; }
.box6 { background:#e67e22; }
.box7 { background:#e74c3c; }
.box8 { background:#bdc3c7; }
.box9 { background:#2ecc71; }
.box10 { background:#16a085; }

我的 HTML 是:

<div class="container">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
    <div class="box box5">5</div>
    <div class="box box6">6</div>
    <div class="box box7">7</div>
    <div class="box box8">8</div>
    <div class="box box9">9</div>
    <div class="box box10">10</div>
</div>

我注意到边框的底部在谷歌浏览器中被截断了，只有当我“向下滚动”一点点时才可见。如何让边框适合我正在查看的窗口？

此外，如果我想设置 flex-direction: column，我如何才能让每个“框”填满整个屏幕？

Answer 1

只需将 .container 上的 box-sizing 设置为 border-box 并使用 flex: 1在 flex 元素上。

.container {
  box-sizing: border-box;
  display: flex; 
  border: 10px solid goldenrod;
  min-height: 100vh; /* height 100%*/
  flex-flow: row nowrap;
}

.container:nth-child(odd) {
  flex-flow: column nowrap;
}

.box {
  flex: 1;
  color: white;
  font-size:200%;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
  padding:10px;
}

.box1 { background:#1abc9c; }
.box2 { background:#3498db; }
.box3 { background:#9b59b6; }
.box4 { background:#34495e; }
.box5 { background:#f1c40f; }
.box6 { background:#e67e22; }
.box7 { background:#e74c3c; }
.box8 { background:#bdc3c7; }
.box9 { background:#2ecc71; }
.box10 { background:#16a085; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" rel="stylesheet"/>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
</div>
<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
  <div class="box box5">5</div>
  <div class="box box6">6</div>
  <div class="box box7">7</div>
  <div class="box box8">8</div>
  <div class="box box9">9</div>
  <div class="box box10">10</div>
</div>