flexbox布局中的小屏幕不可見頁腳

Question

更改頁面寬度后，頁腳消失了。

我希望我的頁面在減小寬度后顯示在列中。 我的頁腳不在容器中，因為當我將其設置到容器時，它位於容器中第四個元素的右側。 我不知道如何放入正確的位置（頁面底部）。

代碼

.container > *{
  padding: 10px;
  flex: 1
}
.container{
  display: flex;
  height: 400px;
}

@media screen and (max-width: 800px) {
.container{
  flex-direction: column;
}
}

<div class="header">
</div>
<div class="container">
      <div class="lol first"> 
          <div class="list">
          </div>
      </div>
       <div class="lol second"> 
       </div>
        <div class="lol third"> 
        </div>
         <div class="lol fourth">
         </div>
</div>
      <div class="footer">  
      </div>
</div>

Answer 1

你可以把 height on.lol 而不是容器：

.container{
  display: flex;
  flex-wrap: ;
}
.lol {
  height: 400px;
}

https://codepen.io/jfitzsimmons/pen/gOYBdrq