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，