How to prevent my text overflowing and make responsive div?

Issue

my text is overflowing see the screenshot https://drive.google.com/file/d/1i_9VvP54CAJJSvtsArZiTMMfMzACDS11/view?usp=sharing

here is css:

.card_main {
  border: 1px solid black;
  margin-top: 30px;
  border-radius: 5px;
  height: 900px;
  background: #ffffff;

  width: 100%;
}
.blog_content__text {
  width: 95%;
  height: 320px;
  border-bottom: 1.5px solid lightgray;
  margin-left: 2.5%;
  margin-top: 20px;
}
.blog_heading {
  font-size: 24px;
  color: black;
}
    .blog_details {
  font-size: 16px;
  color: black;
  opacity: 0.7;
  margin-top: 20px;
}

my html

 <div className="card_main">
     <div className="blog_content__text">
     <h1 className="blog_heading">{data.blog_title}</h1>
     <p className="blog_details">{data.blog_body}</p>
      </div>
<div/>

how to prevent overflowing my text and make the div responsive. I am not an CSS expert. I just start learning css

Solution

When using fixed height for a div, you also need to say how the scroll should work. In this case using overflow-y:auto makes sense. You may prefer overflow-y:hidden or always show scrollbars overflow-y:scroll;

If there is no serious limitation in terms of graphics, do not specify the height for a Div to make its height responsive to the content.

.blog_content__text {
  width: 95%;
  height: 320px;

  overflow-y:auto;

  border-bottom: 1.5px solid lightgray;
  margin-left: 2.5%;
  margin-top: 20px;
}

Answered By - Ali Sheikhpour