css width: 100%, auto

记录一下CSS width的两个值：

CSS代码：

.container {
  width: 1000px;
  border: 1px solid;
  
}
.main {
    width: auto;
    // width: 100%;
    padding: 10px;
    border: 1px solid;
  
}
.left {
  border:1px solid;
  flex: 1 2 300px;
}
.right {
  border:1px solid;
  flex: 1 1 200px;
}

HTML代码：

<div class="container"> 
  <section class="main">
    …
  </section>
</div>

假设父元素的宽度为1000px，若是子元素宽度是100%，有padding，那么子元素的宽度仍是1000px，而后还有一个padding为10px，

　　　　　　　　　　　　　　若是子元素宽度是auto，有padding，那么子元素的宽度仍是980px，而后还有一个padding为10px，