title: flexbox - center items for 1/3 and 2/3 proportion
body: <p>I need to center item (one) in 1/3 row space and center another item (two) in the rest of the row space (2/3).</p>
  
  <p><a href="https://jsfiddle.net/gpe9a5qb/1/" rel="noreferrer">https://jsfiddle.net/gpe9a5qb/1/</a></p>
  
  <p>How to center items to the specific space they fit so they will NOT center depends on their size but depend on the size of the space they are signed (1/3 and 2/3)?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    border: 1px dotted yellow;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: brown;
  }
  
  .container {
    background: red;
    width: 250px;
    height: 100px;
  }
  
  .box {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  
  .one {
    background: green;
    flex: 1 1 auto;
  }
  
  .two {
    background: blue;
    flex: 2 1 auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="box"&gt;
      &lt;div class="one"&gt;1/3&lt;/div&gt;
      &lt;div class="two"&gt;2/3&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>.one should be center inside 1/3 and .two must be center inside 2/3 space.</p>