Как исправить: Переполнение текста DIV в CSS / HTML?

Question

У меня есть DIV (.main), который содержит фоновое изображение. Текст TOS накладывается на фоновое изображение. Все нормально, когда окно браузера расширяется, но как только я слишком сильно его уменьшаю, текст из TOS переполняет изображение.

Вы можете увидеть проблему LIVE, зайдя на мой сайт и изменив размер окна. https://royalkingdom.net/store/

Я уже пытался играть с отступами, полями, максимальной высотой и максимальной шириной.

/* 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;

}

Я ожидаю, что текст будет соответствовать размеру изображения. Даже когда я изменяю размер окна моего браузера. Хорошо, если для этого нужна полоса прокрутки (когда размер окна слишком мал)

Answer 1

Я думаю, вам нужно добавить background-size: 100% 100%;

Проверьте это JSFiddle , которое я настроил для имитации вашего div.Эта вторая 100% заставляет изображение быть на всю ширину div, так как изображение не увеличивалось с высотой div.Если вы уберете эти вторые 100% в JSFiddle, вы увидите, что красная граница все еще расширяется, а изображение - нет.

#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>

Одна из проблем, с которой вы можете столкнуться, - если у вас слишком много / слишком мало текста, изображение будет сильно искажено.

Answer 2

Пожалуйста, попробуйте код -

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