title: something about display:-webkit-box; -webkit-box-flex:1
body: <p>Try to imagine a situation</p>
  
  <p>there is a div and inside the container there are three  divs , </p>
  
  <p>and sometimes we need to let the inside divs self-adaption.</p>
  
  <p>like this </p>
  
  <p>css:</p>
  
  <pre><code>.a{display:-webkit-box;width:300px;height:100px;background:#222}
  .a div{-webkit-box-flex:1;height:100px}
  .a-1{background:red}
  .a-2{background:yellow}
  .a-3{background:blue}
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="a"&gt;
      &lt;div class="a-1"&gt;abc&lt;/div&gt;
      &lt;div class="a-2"&gt;abcdddd&lt;/div&gt;
      &lt;div class="a-3"&gt;abcdddddddde&lt;/div&gt;
  &lt;/div&gt;    
  </code></pre>
  
  <p>but a-1 ,a-2 , a-3 do not self-adaption .i mean a-1 a-2 a-3 do not equal in length.  it seems also depends on the text length. </p>
  
  <p>how solve?</p>