如何修复：CSS / HTML中的文本溢出DIV？

Question

I have a DIV (.main) that contains a background-image. A TOS text overlays the background image. Everything is fine when the browsers window is extended, but once I shrink it too much down, the text from TOS overflow the image.

You can see the problem LIVE by going on my website and resizing the window. https://royalkingdom.net/store/

I've already tried to play with the padding, margins, max-height and max-width.

/* Main column */
.main {
  flex:60%;
  height:940px;
  margin-bottom:10vh;
  padding-right:8%;
}
#bgimg {
 position: relative;
 height:100%;
 width:100%;
 background-image: url("https://i.imgur.com/NPhmcae.png");
 background-size: 100%;
 background-repeat: no-repeat;
 background-position:center top; ;
 display: block;
 padding-top:13%;
 padding-right:10%;
 padding-left:10%;
 padding-bottom:13%;

}
.panel-body {
  text-align:justify;
  padding:1px;
  width: auto;
  max-height: 100%;
  display: inline-block;

}

I expect to have the text to fit the image size. Even when I resize my browser window. It is fine if it needs to have a scrollbar (when the window size is too small)

Answer 1

Please try code -

.panel-body {
    text-align: justify;
    padding: 1px;
    width: auto;
    max-height: 75vh;
    display: inline-block;
    overflow-y: scroll;
}

Answer 2

I think what you need to add is background-size: 100% 100%;

Check out this JSFiddle that I set up to mimic your div. That second 100% forces the image to be the full width of the div, as the image was not expanding with the height of the div. If you take away that second 100% in the JSFiddle you will see that the red border still expands but the image does not.

 #div2{ background-image:url(https://i.imgur.com/NPhmcae.png); background-size: 100% 100%; background-repeat: no-repeat; background-position:center top; display: block; padding-top:13%; padding-right:10%; padding-left:10%; padding-bottom:13%; height:auto; width:auto; border: 1px solid red; } 

 <div id="div2"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. A iaculis at erat pellentesque adipiscing commodo elit. Quam elementum pulvinar etiam non. Imperdiet dui accumsan sit amet nulla facilisi. Tempus imperdiet nulla malesuada pellentesque elit. </p> </div> 

One problem you might encounter is if you have too much/too little text the image will be greatly distorted.