Как предотвратить выход динамически добавляемых div элементов за границы родительского контейнера

Проблема с переполнением контейнера динамическими элементами

Уже несколько дней бьюсь над этой проблемой и не могу найти решение. Уверен, что упускаю что-то простое, но никак не пойму, что именно.

Пробовал разные варианты, которые находил в интернете, например overflow:hidden или overflow:auto, менял структуру на табличную и так далее.

Проблема в том, что колонки слева имеют переменную ширину и зависят от выбора пользователя на предыдущей странице. Поэтому нельзя задать фиксированную ширину для правой части, и нельзя использовать счетчик для ограничения количества колонок, когда пользователь добавляет Пользовательскую цену.

HTML разметка:

<div class="priceContainer">
 <div class="itemBox">
   <div class="logoSection">
     <img src="images/CompanyLogo.png" class="companyImage" />
   </div>
   <div class="priceValue">$0.05125</div>
   <div class="totalAmount">$2,874.45</div>
   <div class="discountValue">$543.22</div>
   <div class="priceValue">$0.05847</div>
   <div class="totalAmount">$3,123.88</div>
   <div class="discountValue">$445.77</div>
   <div class="priceValue">$0.05300</div>
   <div class="totalAmount">$2,940.33</div>
   <div class="discountValue">$612.45</div>
   <div class="priceValue">placeholder</div>
   <div class="totalAmount">placeholder</div>
   <div class="discountValue">placeholder</div>
 </div>
</div>

CSS стили:

.itemBox {
  border-radius: 15px;
  border: 2px solid #333;
  float: left;
  margin-right: 15px;
  background: rgba(45, 120, 35, 0.9);
  background-image: url(images/backgroundPattern.png);
  background-size: contain;
  padding: 12px;
}

.priceValue {
  font-size: 16px;
  line-height: 35px;
  text-align: center;
  margin-top: 8px;
}

.totalAmount {
  font-size: 14px;
  line-height: 25px;
  text-align: center;
}

.discountValue {
  font-size: 14px;
  line-height: 25px;
  text-align: center;
  margin-bottom: 12px;
}

.priceContainer {
  margin-left: 120px;
  position: relative;
  width: auto;
}

JavaScript код:

$("#CreateCustomRate").click(function(event) {
    event.preventDefault();
    $("#popup-form").dialog({
      modal: true,
      buttons: {
        "Создать цену": function() {
                    var Duration = $("#PeriodInput").val();
                    var Rate = $("#RateInput").val();
                    var BaseRate = $("#BaseRateData").attr('data-value');
                    var Usage = $("#UsageData").attr('data-value');
                    var BaseCost = originalCost;
                    var TotalSaving = BaseCost - Rate * Usage;
                    var YearlyCost = Rate * Usage;
                    
                    $(".priceContainer").append(
          '<div class="customItemBox">'
          +'  <div class="logoSection">'
          +'    <img src="images/custom_logo.png" class="companyImage" />'
          +'  </div>'
          +'<div class="contentBlock">'
          +'  <div class="priceValue"><strong>'+Duration+' мес.</strong><br>'+Rate+'</div>'
          +'  <div class="totalAmount">'+YearlyCost.toFixed(2)+'</div>'
          +'  <div class="discountValue">'+TotalSaving.toFixed(2)+'</div>'
          +'</div>'
          +'</div>'
          );
          $(this).dialog("close");
        }
      }
    });
});

Возможно, код не самый красивый, но мне нужно, чтобы он работал. Буду благодарен за быстрые ответы!

Попробуй grid. Сделай .priceContainer с display: grid и grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)). Элементы сами подстроятся под ширину и перенесутся на новые строки. Только убери float: left из .itemBox - он конфликтует с современными методами верстки.

Проблема в float: left без очистки. Убери float и добавь к .priceContainer - white-space: nowrap с overflow-x: auto. Или лучше: задай max-width: calc(100vw - 140px) для контейнера (твой margin-left: 120px учтен). Элементы не будут вылезать за экран и появится горизонтальная прокрутка.

У меня была такая же проблема с галереей картинок. Добавь flex-wrap: wrap к родительскому контейнеру и сделай его флексбоксом. Еще поставь max-width: 100% для динамических элементов. В твоем случае попробуй добавить в css для .priceContainer - display: flex и flex-wrap: wrap, а для .itemBox и .customItemBox - flex-shrink: 0. Элементы будут переноситься на новую строку вместо того, чтобы вылезать за края.