画像の説明をここに入力

上のようにflec containerに合わせてitemの幅が広がってしまうのですが、
これを"item"のコンテンツ幅に合わせるにはどうすればよいのでしょうか？

[html]

 <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Practice</title>
        <link rel="stylesheet" href="styles.css">

      </head>

      <body>
    <div class="container">
        <p class="item">item</p>
        <p class="item">item</p>
        <p class="item">item</p>
    </div>


      </body>


    </html>

[css]

@charset "UTF-8";

*{
  margin: 0;
  padding: 0;
  text-align: center;
}

/*中の幅に合わせて縦並びにしたい*/
.container{
    display: flex;
    background: skyblue;
    justify-content: space-between;
    flex-direction: column;
}

.item{
    background: tomato;
    flex: 0 1 auto;
}