如何摆脱带有换行符的文本保留的空间？

Question

我在<div>中有两个元素（分别是图像和文本），我使用flexbox居中。

问题在于，由于长字而导致换行时，文本会占用额外的空间。

.container {
  background: grey;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
}

.image {
  color: white;
  width: 50px;
  height: 50px;
  background: red;
  margin-right: 5px;
}

p {
  background: yellow;
  margin: 0;
}

<div class="container">
  <div class="image">IMG</div>
  <p>Word word word</p>
</div>

<br/>

<div class="container">
  <div class="image">IMG</div>
  <p>Word word word verylongword</p>
</div>

<br/>

<div class="container">
  <div class="image">IMG</div>
  <div>
    <p style="display:inline">Word word word verylongword</p>
  </div>
</div>

JS Fiddle demo

在第一种情况下，没有换行符并且元素位置正确。在第二种情况下，长字会导致换行，而<p>会保留剩余空间。

这就是我的期望：

我尝试将文本括在另一个<div>中，并使其变为display: inline;（第三种情况），但是空格仍然存在。

有什么想法吗？