How to set width based on content length using flex

I'm trying to make width of each item based on the content but what I have so far set the width all the way to available spaces. flex: 0 0 auto does not seem to do the trick. What am I doing wrong?

Goal is have a width based on the content size.

[Hello]
[Hello world]

Currently

[Hello                   ]
[Hello world             ]

https://jsfiddle.net/v6cgLjbd/8/

<span class='box'>
  <span class='item'>Hello</span>
  <span class='item'>Hello World</span>
  <span class='item'>Hello lOOOOONG text</span>
</span>

.box {
  height: 200px;
  width: auto;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
}

.item {
  background-color: gray;
  flex: 0 0 auto;
  width: auto;
}