Why are values being retrieved after post request going out of div?

Question

The last card you see is information being retrieved after a post request to add a review from a form into the json server db, and its going outside the div.

Where as the reviews being entered manually inside the json db are being retrieved and displayed just perfectly as you can see.

Could anyone please help with this? I am attaching my code below.

---

RenderList.js is the code for displaying the cards you see below.

---

import React,{Fragment} from "react";
import { connect } from "react-redux";
import { Link } from 'react-router-dom';
import {getList, getReviews, calculateAverage} from '../../actions';
import { Button, Icon, Image, Item, Label, Rating, Modal, Header, Card } from 'semantic-ui-react';
import '../../styles.css';


class RenderList extends React.Component {

  componentDidMount(){

  }


  renderList() {
    const listReview = this.props.list;
    return (listReview || []).map(l => {
      if(this.props.starVal == undefined){

        return (
          <div class="ui card">
            <div class="content">
              <div class="header">{l.title}</div>
              <div style={{float:"right"}}>
                <Rating size="large" icon="star" disabled defaultRating={l.rating} maxRating={5}> </Rating>
              </div>
              <div style={{marginTop:"12px"}} class="meta"> by {l.name}</div>
              <div style={{marginTop:"12px"}} class="description">{l.review}</div>
            </div>
          </div>
        );
      }
       if(l.rating == this.props.starVal) {
        return (
          <div class="ui card">
            <div class="content">
              <div class="header">{l.title}</div>
              <div style={{float:"right"}}>
                <Rating size="large" icon="star" disabled defaultRating={l.rating} maxRating={5}> </Rating>
              </div>
              <div style={{marginTop:"12px"}} class="meta"> by {l.name}</div>
              <div style={{marginTop:"12px"}} class="description">{l.review}</div>
            </div>
          </div>
              );
      }
            });
            }

            render() {
              return (

                <div>
                  <div class="ui cards" style={{  overflow: "auto", maxHeight: "50vh", marginTop:"0px"}} >{this.renderList()}</div>
                </div>
              );
            }
            }

        const mapStateToProps = state => {
          return {
            list: Object.values(state.list),
            starVal: state.list.starValue

          };
};

export default connect(mapStateToProps, { getReviews, calculateAverage })(RenderList);

---

db.json is the json db from which the value is being retrieved.

---

{
  "reviews": [
    {
      "id": 1,
      "name": "Test User",
      "title": "Perfect",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 5
    },
    {
      "id": 2,
      "name": "Test User",
      "title": "Decent Product",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 4
    },
    {
      "id": 3,
      "name": "Test User",
      "title": "Easy Installation",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 4
    },
    {
      "id": 4,
      "name": "Test User",
      "title": "Not bad",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 3
    },
    {
      "id": 5,
      "name": "Test Userkjnkjnkjnkjnkjnkjnkjnkjnkjnkjnkjnk",
      "title": "Does the job",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 3
    },
    {
      "id": 6,
      "name": "Test User",
      "title": "Hey",
      "review": "this is a great product, this is a great product, this is a great product, this is a great product, this is a great product, this is a great product",
      "rating": 3
    },
    {
      "id": 7,
      "name": "jknjknjnkjnkjnkjnkjnkjnkjnknjknkjnkjnkjnkjnkjnkjnkjnkjnkjnk",
      "title": "jnjnkjnkjnkjkn",
      "review": " n n n jn jhjhbhjbjnkjnjuhiubihbibbkjbnjknkjbjhbjkbkjbkjbkbkhbjbjkbkjbjkbkjbjbkjbjkbjkbjbjkbkjbjbkjbkjbjbkjb",
      "rating": 2
    }
  ],
  "stars": [
    {
      "id": 1,
      "one": 0
    },
    {
      "id": 2,
      "two": 2000
    },
    {
      "id": 3,
      "three": 0
    },
    {
      "id": 4,
      "four": 0
    },
    {
      "id": 5,
      "five": 0
    }
  ]
}

Please let me know if you need any other piece of code.

Answer 1

Because it doesn't have a space between to have a line break.

Adding word-wrap: break-word; to your CSS will fix that.