我在我的一个React网络应用程序的布局上遇到了一些麻烦。虽然它大部分都能按我想要的那样工作，但情况是这样的。
以下是相关React代码：

<React.Fragment>
<div className="container">
  <div className="row">
    <div className="col-xl-12-w">
      <h1 className='blocTit'>{displayTitle}</h1>
    </div>
  </div>
  <div className="row">
    <div className="col-xl-12-w">
      {clctnBufr.map((item,index) => (
        <div
          key={item.uid}
          className="card float-left"
          style={{ width: "18rem", marginRight: "1rem" }}
        >
          <div className="card-body">
            <div className="card-tit-prx">
              <div className="card-title">
                {displayName(item)}
              </div>
              <div className="card-price">
                {displayPriceC(item.price,this.priceShft,currency)}
              </div>
            </div>
            {displayComment(item)}
          </div>
        </div>
      ))}
    </div>
  </div>
</div>
</React.Fragment>

而这是我认为是相关的CSS代码：

.card-body {
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(117, 61, 5);
  background-color: rgb(228, 245, 131);
  padding-block: 5px;
}

.card-tit-prx {
  display: flex;
  flex-direction: row;
  align-self: stretch;
  justify-content:space-between;
}

.card-title {
  color: rgb(52, 8, 155);
  font-family: 'Georgia';
  font-weight: normal;
  font-size: 23px;
  padding-left: 2%;
}

.card-price {
  color: rgb(185, 73, 28);
  font-family: 'Verdana';
  font-weight: normal;
  font-size: 17px;
  padding-right: 2%;
}

下图是显示最后3项问题的屏幕截图，其中部分文本（即：“葱”，“满足”）是溢出的方块外，而不是在里面作为其余的文本。

我也曾尝试过在上下文之外重现这个问题，但没有成功。所以我想知道我是否错过了什么。如果有人知道如何进一步调查，甚至更好地解决这个问题，我会很高兴。
这里是一些更多的信息。通过插入一个空格在显示的价格（见下面的第二个屏幕截图），它使它采取2行和框得到一个适当的大小作为结果。为什么它没有得到这个大小时，名称（左部分）是需要它是一个谜。
但是我不想在显示价格的时候必须插入一个空格！这就是问题所在。