css3自適應關鍵字: max-content

01)  max-content

width:max-content表示采用內部元素寬度值最大的那個元素的寬度作為最終容器的寬度。如果出現文本，則相當於文本不換行

    <style>
    .outer{
      width:-webkit-max-content;
      width: -moz-max-content;
      width: max-content; 
      border:5px solid #5E9EC0;
    } 
    </style>
    <div class="outer">
      <div style="height:10px;width:100px;background:#80C080"></div>
      <div style="background-color: #85194B;">dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛</div>
    </div>

 

 

 

 02)  min-content

min-content 表示采用內部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度

<style>
  .outer{
    width:-webkit-min-content;
    width: -moz-min-content;
    width: min-content; 
    border:5px solid #5E9EC0;
  } 
  </style>
  <div class="outer">
    <div style="height:10px;width:100px;background:#80C080"></div>
    <div style="background-color: #85194B;">
      dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛dafei_大飛
    </div>
  </div>