max-width表示最大寬度，此時width取值范圍為0~max-width，具體的值會綜合去判斷：內(nèi)部元素大小，可視窗口大小等。

如果可視窗口小于你給的值，那它當(dāng)然就會取可視窗口的值啦~

不信你試試把html和css窗口關(guān)掉？是不是就在一排了？~

所以如果需求是一定要在一排顯示，建議固定width或者寫成min-width；

border嘛，wrapper的不用管，但是內(nèi)部元素不能有。

先解釋不用管的:
為什么不用管呢，因為現(xiàn)在wrapper的box-sizing屬性是默認(rèn)值content-box，你加的border會加到wrapper上，也就是(800+1)px，所以對布局是沒有任何影響的啦~

內(nèi)部元素為什么不能添加：
border會加到盒子的寬度上，而不管怎么樣，wrapper內(nèi)部空間始終只有800px,如果給main加一個border 1px，那它內(nèi)部空間就需要802px，不夠，當(dāng)然就掉下去了

border也有寬度 你可以看下盒模型

border邊框也占了寬度，加起來超過800px

你可以使用flex布局

你的<aside></aside><main></main> 是使用的inline-block雖然連寫可以解決中間間隙的問題，但并不建議這么做，你可以看下其他解決方案https://segmentfault.com/a/11...
另外你的換行問題是由border引起的，border 的 1px 不是包含在<aside></aside><main></main>內(nèi)的，所以<aside>的占空應(yīng)該是200px+2px剩下的空間600px-2px不足以擺放<main>的600px+2px的寬，所以會換行
你可以通過加上css 屬性box-sizing:border-box;可以把border的1px包含在200px內(nèi)，
所以，最終代碼是

body{
  margin: 0;
}
aside {
   display: inline-block;
   background: #666;
   min-height: 200px;
   width: 200px;
   border:solid 1px #0f0;
   box-sizing:border-box;
}
 main{
   display: inline-block;
   min-height: 400px;
   width: 600px;
   vertical-align: top;
   border:solid 1px #00f;
   box-sizing:border-box;
   background: #333;
 }  
.wrapper{
   min-width: 800px;
   margin: 0 auto;
}

加一句
box-sizing:border-box;

只要設(shè)置border 屬性了， 你就加一個box-sizing:border-box; 然后感覺你最后的 max-width:800px;感覺也有問題。不明白你為什么這么寫

因為寬度加邊框?qū)挾瘸^了外面設(shè)置的800px

建議使用flex布局

把max-width改成width或者min-width，注意這幾個的區(qū)別，還有取消wrapper的border，注意基本的計算