How do I make a flexbox and its children hug the content?

Question

I need some help with the component below:

section {
  background-color: orange;
}

#container {
  display: inline-flex; /* This should make it hug right? */
  flex-direction: row;
  padding: 10px;
  margin: 20px;
  background-color: blue;
}

#container .item {
  background-color: purple;
  margin: 10px;
}

<section>
  <div id="container">
    <div class="item">Icon</div>
    <blockquote class="item">

      <p class="item">
        long quote text asd asdf asdjkfa saljsd fjasd lakjds kfjadsa slkj asdkjf asdlk fjasdlkf jalsd kfjalksdjf alksjd flkajsdf lkajsd flkja sdlkfj aslkdjf alskdj alkjf slkj dlkj flksajdf lkjsalkdjlfkj lsdaf
      </p>

      <footer class="item">
        <p>footer text</p>
      </footer>

    </blockquote>
    <div class="item">Icon</div>
  </div>
</section>

If you inspect the text content of the <p> tag, and the <p> tag itself, the width of the text content is smaller than the width of the <p> tag.

I'm assuming the <p> stretching to fit the parent container's width, but I need it to hug the text content instead (along with the parent container). The container needs to be flex, so I've given it inline-flex instead, but it looks like it's still not hugging the text. What could I be missing?

Thanks in advance!