多行段落在弹性项目中添加多余的填充

Question

我正在尝试创建一个小型促销横幅，其中包含flex容器（如淡蓝色图片），一个flex项目，它本身就是一个包含段落的flex容器，最后是一个包含描述的第二个flex项目。

我希望第一个弹性项目灵活到40％，然后在超过该长度时自动换行。

问题在于，当它发生这种情况时，它会在段落中添加一个非常长的填充，从而推动它的长度并使设计失去平衡。

我不确定它是否是Flexbox问题或段落长度问题。

单行 - flex很好

多行 - 奇怪的填充

守则：

.infoBox {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -o-flex;
  display: flex;
  align-items: center;
  height: 90px;
  background-color: #00aaee;
  color: #ffffff;
  padding: 14px 45px 14px 27px;
  margin: 6px 0px 40px 0px;
  -webkit-border-radius: 0px 45px 45px 0px;
  -moz-border-radius: 0px 45px 45px 0px;
  border-radius: 0px 45px 45px 0px;
  position: relative;
  -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
  box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
.infoBox .title {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -o-flex;
  display: flex;
  -webkit-box-flex: 0 auto;
  -moz-box-flex: 0 auto;
  -ms-flex-flex: 0 auto;
  -webkit-flex: 0 auto;
  -o-flex: 0 auto;
  flex: 0 auto;
  font-size: 30px;
  margin-right: 27px;
  align-items: center;
  border-right: 1px solid white;
  height: 100%;
  max-width: 40%;
}
.infoBox .title p {
  line-height: 1em;
  margin-right: 27px;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-flex-flex: 1;
  -webkit-flex: 1;
  -o-flex: 1;
  flex: 1;
}

<div class="infoBox">
  <div class="title"><p>Behind the scenes</p></div>
  <div class="description">
    <p>Quick-hit reviews of our favorite apps, games and other things no    mobile user should be without.</p><p>www.test.com</p>
  </div>
</div>

非常感谢任何帮助！