How to prevent my text overflowing and make responsive div?-CodePudding

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

CodePudding user response：

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;

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

  overflow-y:auto;

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

If there is no serious limitation in terms of graphics, I suggest you do not specify the height for a Div.

CodePudding user response：

remove the height: 320px; if you must, use it as min-height: 320px;

CodePudding user response：

try setting a margin-bottom css attribute to the div that contains the text, the value of the margin should equal the height of that white footer that is hiding the text on the bottom.

CodePudding user response：

You can also make use of the following property if you really want to set the height:

height: min-content;