Estoy experimentando algunos problemas con la propiedad de ancho de CSS. Tengo algunos párrafos dentro de un div. Me gustaría hacer que el ancho de los párrafos sea igual a su contenido, para que su fondo verde se vea como una etiqueta para el texto. Lo que obtengo en cambio es que los párrafos heredan el ancho del nodo padre div que es más ancho.

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}

<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>