Text overflow outside of a box, using React and Flexbox - css

Question

I am having some trouble with the layout in a React web app of mine.
Though it mostly work as I want, here is the situation.
This is the relevant React code:
<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>
And this is what I believe to be the relevant css code:
.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%;
}
The image below is a screenshot showing the issue on the last 3 items where part of the text (namely: "spring onion", "meet") is overflowing outside of the box instead of being inside as the rest of the text.
I have also unsuccessfully tried to reproduce the issue outside of the context. So I wonder if I am not missing something. If someone has an idea on how to further investigate or even better solve this problem I'd be glad.
Here is some more information. By inserting a space in the display of the price (see the 2nd screenshot below) it makes it take 2 lines and the box gets a proper size as consequence. Why it did not get this size when the name (left part) was requiring it is a mystery.
But I do not want to have to insert a space in the display of the price! This is the problem.

Answer 1

I finally solved this issue after spending some time digging.
Just in case somebody happens to read this while hitting a similar case, I report what I did.
The problem of the "card-title" part and the "card-price" part not exhibiting the same behavior for some mysterious reason came from the fact that "card-title" was already defined in a different .css file. The two definitions were conflicting and producing the problem. It was difficult to see at first glance because this other .css file was not directly included and I am not so familiar with the workings of CSS.
A lesson seems to be: "It is not a good idea to define the same css item in two or more different places in a project".