Search code examples
cssreactjsflexbox

Text overflow outside of a box, using React and Flexbox

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.

enter image description here

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.

enter image description here

Solution

  • 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".