Make parent fit multiline paragraph without margin

Question

I have some elements that contain multiline paragraphs. The parent (card) is set to some maximum width and until the text has a single line it shrinks to its length. However, when the paragraph is long enough to go to the next line, the card is always as wide as its maximum width, even if such width is not required, given that long words produce a wide margin/padding on the right side of the element.

What I would like would be to have a way to automatically shrink the container (card) to fit the text content even when it's multiline, and hence not having the margin on the right side.

In the picture, I show how it looks today, and what I'd like to achieve (demoed with hardcoded values just to have an idea of the result). I also noticed something like this exists in Android and iOS, and was able to do that in React Native.

html,
body {
  display: flex;
  flex-grow: 1;
  height: 100%;
  margin: 0;
  padding: 0;
}

.outer {
  display: flex;
  flex-grow: 1;
  flex-direction: column;
  width: 100%;
  background-color: gray;
  align-items: center;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: white;
  width: 90%;
  padding: 1rem;
  gap: 0.5rem;
}

.card_line_container {
  display: flex;
  flex-direction: row;
}

.card_normal {
  display: flex;
  flex: 0.7;
  align-items: center;
  min-height: 3rem;
  background-color: pink;
  width: auto;
  border-radius: 5px;
}

.card_normal_text {
  margin: 0.5rem;
  font-family: sans-serif;
}

<div class="outer">
  <div class="container">
    <p style="font-family: sans-serif">
      How it is:
    </p>
    <div class="card_line_container">
      <div class="card_normal">
        <p class="card_normal_text">
          Text with some long text with some long text with sooooooome long text with some long text
        </p>
      </div>
    </div>
    <div class="card_line_container">
      <div class="card_normal">
        <p class="card_normal_text">
          Text with some long text with some long text with som long text with some long text
        </p>
      </div>
    </div>
    <p style="font-family: sans-serif">
      How I'd like it to be:
    </p>
    <div class="card_line_container">
      <div class="card_normal" style="max-width: 63%">
        <p class="card_normal_text">
          Text with some long text with some long text with sooooooome long text with some long text
        </p>
      </div>
    </div>
    <div class="card_line_container">
      <div class="card_normal">
        <p class="card_normal_text">
          Text with some long text with some long text with som long text with some long text
        </p>
      </div>
    </div>
  </div>
</div>

JSFiddle: https://jsfiddle.net/qgoctwLy/30/