CSS Flexbox – Popup is still Beholden to Parent Flexbox

I have some basic code that allows for a popup to appear when something is hovered over. Codepen: https://codepen.io/Sean713/pen/GRBpVOZ

<div class="row">
  <div class="subdiv">
    <p class="hover">Hover</p>
    <div class="popup">
      <p>Surprise I am a popup</p>
      <p> and so am I</p>
    </div>
  </div>
</div>

.row {
  height: 100px;
  border: 1px solid red;
  display: flex;
}

.subdiv {
  border: 1px solid green;
  position: relative;
}

.popup {
  display: none;
  position: absolute;
  left: 100px;
  border: 1px solid black;
}

.hover:hover + .popup {
  display: inline;
}

Since .row is a flexbox, it makes sense that .subdiv should compress its width to its content, as I have not specified otherwise.

However, the popup that appears when I hover is having unexpected behavior. The actual text inside the p tags is wrapping and is only as wide as the longest word in the sentence, it seems to be acting almost like .subdiv. I’m not sure why this is the case or why the fact that .row being a flexbox is influencing this popup. I would like for the p tags inside the popup to full block and allow the popup to wrap around that.