圣杯布局min-width设置问题

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style type="text/css">
 body{
  margin: 0;
  padding: 0;
 }
 .header{
  width: 100%;
  height: 40px;
  background: darkseagreen;
 }
 .container{
  overflow: hidden;
  padding: 0 200px;
  min-width: 500px;
  
 }
 .middle,.left,.right{
  float: left;
  height: 200px;
  position: relative;
 }
 .middle{
  width: 100%;
  background:deeppink;
 }
 .left{
  width: 200px;
  background: blue;
  margin-left: -100%;
  left: -200px;
 }
 .right{
  width: 200px;
  background: darkorchid;
  margin-left: -200px;
  right: -200px;
 }
 .footer{
  width: 100%;
  height: 30px;
  background: darkslategray;
 }
 </style>
</head>
<body>
 <div class="header">header内容区</div>
 <div class="container">
  <div class="middle">1.中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区中间弹性区</div>
  <div class="left">左边栏</div>
  <div class="right">右边栏</div>
 </div>
 <div class="footer">footer内容区</div>
</body>
</html>

老师我的代码min-width放在body不起作用，放在container才行，为什么？

慕粉6557610 2017-09-22

源自：CSS网页布局基础 3-2 圣杯布局案例