定製CSS：溢出：汽車+指定的寬度

Question

實施例：http://jsfiddle.net/5VCfm/2/embedded/result/

.container { 
    position: absolute; 
    border: 1px solid red; 
    max-width: 90%; 
    margin-bottom: 20px 
} 
.container + .container { 
    top: 260px; 
} 
.content-container { 
    border: 1px solid green; 
    max-height: 200px; 
    overflow: auto; 
    padding: 15px; 
} 
.content-wrap { 
    border: 1px solid navy; 
} 
.content { 
    border: 1px solid red; 
    padding: 10px; 
} 

HTML

<div class="container"> 
    <div class="content-container"> 
     <div class="content-wrap"> 
      <div class="content"> 
       <h2>No width</h2> 
       large content see http://jsfiddle.net/5VCfm/2/embedded/result/ 
      </div> 
     </div> 
    </div> 
</div> 
<div class="container"> 
    <div class="content-container"> 
     <div class="content-wrap"> 
      <div class="content" style="width:300px"> 
       <h2>Width 300px</h2> 
       large content see http://jsfiddle.net/5VCfm/2/embedded/result/ 
      </div> 
     </div> 
    </div> 
</div> 

如果指定內側容器元件的寬度，他起飛母體的創建水平滾動的邊緣。 Mozilla和Chrome中最具特色的行爲是什麼。但Opera和IE顯示沒問題。 如何解決問題？是一個錯誤？

Answer 1

父容器有一個max-width:90%，意味着它將變得儘可能小，但它永遠不會超過視口寬度的90％。

當這個90％小於300px（child）時，水平滾動條正在創建，這個過程是完全正常的，你只需要認識到，孩子有一個固定的寬度，它不會變小。

在.content上使用max-width:300px;，這將允許它具有300px寬的IF IT CAN，但是當父母（90％）更少時，它將變得更緊密。

DEMO