flexbox - center items for 1/3 and 2/3 proportion

Question

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).

https://jsfiddle.net/gpe9a5qb/1/

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)?

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;
}

<div class="container">
  <div class="box">
    <div class="one">1/3</div>
    <div class="two">2/3</div>
  </div>
</div>

.one should be center inside 1/3 and .two must be center inside 2/3 space.

Answer 1

If i get this correctly, you are speaking about center horizontally.

the css will look like this

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;
}
.box > div{
  display:flex;
  justify-content:center;
}

.one
{
 background:green;
flex-basis:33.33%; 
}

.two
{background:blue;
flex-basis:66.66%;}

Hope this helps.

What i did here, is that i put flex on the inside divs, and center their content(not the parent container, which you cant center , because they take up the space).