Как активировать горизонтальную прокрутку у блока и не скрывать высоту?

window.addEventListener('load', () => {

  if (document.querySelector('.calc_wrapper')) {
    document.addEventListener("click", ({ target }) => {

      // Count plus
      if (target.classList.contains('count_plus')) {
        let val = target.previousElementSibling.querySelector('span').innerHTML;
        target.previousElementSibling.querySelector('span').innerHTML = parseInt(val) + 1;
      }
      // Count minus
      if (target.classList.contains('count_minus')) {
        let val = target.nextElementSibling.querySelector('span').innerHTML;
        if (parseInt(val) > 1) {
          target.nextElementSibling.querySelector('span').innerHTML = parseInt(val) - 1;
        }
      }

      // Select open
      if (target.classList.contains('select_selected')) {
        target.nextElementSibling.classList.toggle('visible')
      }
      // Select selected
      if (target.parentNode.classList.contains('select_items')) {
        target.parentNode.classList.toggle('visible');
        target.parentNode.parentNode.querySelector('.select_selected').innerHTML = target.innerHTML + '<span>▾</span>';
        target.parentNode.parentNode.querySelector('.select_selected').dataset.value = target.dataset.value;
      }
      // Fix select click icon
      if (target.parentNode.classList.contains('select_selected')) {
        target.parentNode.nextElementSibling.classList.toggle('visible')
      }

      // Del row
      if (target.classList.contains('calc_rowdel')) {
        target.parentNode.remove()
      }
      // Del row fix click svg path
      if (target.classList.contains('calc_delpath')) {
        target.parentNode.parentNode.parentNode.parentNode.remove()
      }
      // Del row fix click svg
      if (target.parentNode.classList.contains('calc_rowdel')) {
        target.parentNode.parentNode.remove()
      }

      calculate()
    });

    // Add carpet
    document.querySelector('.calc_addrow').addEventListener('click', () => {
      let calcRow = document.createElement('div');
      calcRow.classList = 'calc_row';
      calcRow.innerHTML = document.querySelector('.calc_row').innerHTML + "" +
        "<div class=\"calc_rowdel\"><svg xmlns=\"http://www.w3.org/2000/svg\" height=\"512px\" viewBox=\"0 0 365.696 365.696\" width=\"512px\" class=\"\"><g><path d=\"m243.1875 182.859375 113.132812-113.132813c12.5-12.5 12.5-32.765624 0-45.246093l-15.082031-15.082031c-12.503906-12.503907-32.769531-12.503907-45.25 0l-113.128906 113.128906-113.132813-113.152344c-12.5-12.5-32.765624-12.5-45.246093 0l-15.105469 15.082031c-12.5 12.503907-12.5 32.769531 0 45.25l113.152344 113.152344-113.128906 113.128906c-12.503907 12.503907-12.503907 32.769531 0 45.25l15.082031 15.082031c12.5 12.5 32.765625 12.5 45.246093 0l113.132813-113.132812 113.128906 113.132812c12.503907 12.5 32.769531 12.5 45.25 0l15.082031-15.082031c12.5-12.503906 12.5-32.769531 0-45.25zm0 0\" data-original=\"#000000\" class=\"active-path calc_delpath\" data-old_color=\"#000000\" fill=\"#666666\"/></g> </svg></div>";
      console.log(calcRow);
      document.querySelector('.calc_body').append(calcRow);
    });

    var calcObject = {};
    function calculate() {
      let rows = document.querySelectorAll('.calc_row');
      let countOrder = 0;
      calcObject = {};
      calcObject['Услуги'] = "";
      rows.forEach( row => {
        let sizes = row.querySelector('.calc_sizes .select_selected').dataset.value;
        let period = row.querySelector('.calc_periodicity .select_selected').dataset.value;
        let countCarpet = parseInt(row.querySelector('.count_val span').innerHTML);
        let rowPrice = row.querySelector('.calc_rowprice');

        sizes === "65x85" && period === "1" ? rowPrice.innerHTML = 800 * countCarpet : false;
        sizes === "65x85" && period === "2" ? rowPrice.innerHTML = 1520 * countCarpet : false;
        sizes === "65x85" && period === "3" ? rowPrice.innerHTML = 2160 * countCarpet : false;

        sizes === "80x110" && period === "1" ? rowPrice.innerHTML = 860 * countCarpet : false;
        sizes === "80x110" && period === "2" ? rowPrice.innerHTML = 1640 * countCarpet : false;
        sizes === "80x110" && period === "3" ? rowPrice.innerHTML = 2340 * countCarpet : false;

        sizes === "85x150" && period === "1" ? rowPrice.innerHTML = 1000 * countCarpet : false;
        sizes === "85x150" && period === "2" ? rowPrice.innerHTML = 1920 * countCarpet : false;
        sizes === "85x150" && period === "3" ? rowPrice.innerHTML = 2760 * countCarpet : false;

        sizes === "115x200" && period === "1" ? rowPrice.innerHTML = 1288 * countCarpet : false;
        sizes === "115x200" && period === "2" ? rowPrice.innerHTML = 2392 * countCarpet : false;
        sizes === "115x200" && period === "3" ? rowPrice.innerHTML = 3312 * countCarpet : false;

        sizes === "115x240" && period === "1" ? rowPrice.innerHTML = 1545 * countCarpet : false;
        sizes === "115x240" && period === "2" ? rowPrice.innerHTML = 1870 * countCarpet : false;
        sizes === "115x240" && period === "3" ? rowPrice.innerHTML = 3974 * countCarpet : false;

        sizes === "115x400" && period === "1" ? rowPrice.innerHTML = 2576 * countCarpet : false;
        sizes === "115x400" && period === "2" ? rowPrice.innerHTML = 4784 * countCarpet : false;
        sizes === "115x400" && period === "3" ? rowPrice.innerHTML = 6624 * countCarpet : false;

        sizes === "150x250" && period === "1" ? rowPrice.innerHTML = 2100 * countCarpet : false;
        sizes === "150x250" && period === "2" ? rowPrice.innerHTML = 3900 * countCarpet : false;
        sizes === "150x250" && period === "3" ? rowPrice.innerHTML = 5400 * countCarpet : false;

        sizes === "150x300" && period === "1" ? rowPrice.innerHTML = 2520 * countCarpet : false;
        sizes === "150x300" && period === "2" ? rowPrice.innerHTML = 4680 * countCarpet : false;
        sizes === "150x300" && period === "3" ? rowPrice.innerHTML = 6480 * countCarpet : false;

        sizes === "150x600" && period === "1" ? rowPrice.innerHTML = 5040 * countCarpet : false;
        sizes === "150x600" && period === "2" ? rowPrice.innerHTML = 9360 * countCarpet : false;
        sizes === "150x600" && period === "3" ? rowPrice.innerHTML = 12960 * countCarpet : false;
        countOrder += 1;
        calcObject['Услуги'] += 'Размер ковра:' + sizes + ', Замен в неделю: ' + period + ', Количество: ' + countCarpet + 'шт., Цена: ' + rowPrice.innerHTML + "<br>";

      })
      let globalPrice = 0;
      globalPrice.innerHTML = document.querySelectorAll('.calc_rowprice').forEach(price => {
        globalPrice += parseInt(price.innerHTML);
      });
      document.querySelector('.global_price').innerHTML = globalPrice + ".00";
      calcObject['Общая цена'] = globalPrice + ".00";
    }

    // Modal
    let modal = document.getElementById('calc_modal');
    let btn = document.getElementById("myBtn");
    let span = document.querySelector(".calc_modalclose");
    btn.onclick = function() {
      modal.style.display = "block";
    }
    span.onclick = function() {
      modal.style.display = "none";
    }
    window.onclick = function(event) {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    }

    // Calc send
    document.querySelector('#calc_form').addEventListener('submit', (e) => {
      e.preventDefault();
      var formData = new FormData(e.target);
      formData.forEach(function (value, key) {
        calcObject[key] = value;
      });
      var xhr = new XMLHttpRequest();
      xhr.open('POST', 'http://demidovsales.ru/calcsender.php');
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xhr.send('param=' + JSON.stringify(calcObject));
      xhr.addEventListener("readystatechange", () => {
        if (xhr.readyState === 4 && xhr.status === 200) {
          document.querySelector('#calc_form button').innerHTML = 'Отправлено';
          modal.style.display = "none";
        }
      });
    });
  }
})

.calc_wrapper * {
  user-select: none;
}
.calc_wrapper {
  display: block;
}
.calc_row {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 25px;
}
.calc_title {
  display: flex;
  text-align: center;
  margin-bottom: 20px;
  font-weight: bold;
}

.calc_title > div:nth-child(1),
.calc_row > div:nth-child(1) {
  width: 80px;
  margin-right: 50px;
}
.calc_title > div:nth-child(2),
.calc_row > div:nth-child(2) {
  width: 140px;
  margin-right: 50px;
}
.calc_title > div:nth-child(3),
.calc_row > div:nth-child(3) {
  width: 140px;
  align-self: center
}
.calc_row > div:nth-child(4) {
  width: 140px;
  align-self: center
}

.calc_select {
  position: relative;
}
.select_selected {
  display: inline-block;
  border: 1px solid #cccccc;
  padding: 3px 10px;
  width: 100%;
  cursor: pointer;
  transition: .3s;
  position: relative;
}
.select_selected:hover {
  border: 1px solid #0A4FA0;
  transition: .3s;
}
.select_selected span {
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 23px;
  height: auto;
}
.select_selected:hover span {
  color: #0A4FA0;
  transition: .3s;
}
.calc_select .select_items {
  display: none;
}

.calc_select .select_items.visible {
  display: inline-block;
  z-index: 999;
}
.calc_select .select_items p {
  display: block;
  padding: 3px 10px;
  margin: 0;
  cursor: pointer;
}
.select_items {
  width: 100%;
  position: absolute;
  top: 100%;
  left: 0;
  background: #F8F8F8;
  border: 1px solid #cccccc;
  box-shadow: 0 0 10px -6px;
}
.select_items .selected {
  background: #E0E0E0;
}
.select_items p {
  background: inherit;
}
.select_items p:hover {
  background: #D5D5D5;
  transition: .2s;
}
.calc_carpetcount {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  border: 1px solid #cccccc;
}
.calc_carpetcount .count_minus,
.calc_carpetcount .count_plus {
  padding: 3px 12px;
  cursor: pointer;
  transition: .3s;
}
.calc_carpetcount .count_minus:hover,
.calc_carpetcount .count_plus:hover {
  background-color: #eeeeee;
  transition: .3s;
}
.calc_carpetcount .count_minus {
  border-right: 1px solid #cccccc;

}
.calc_carpetcount .count_plus {
  border-left: 1px solid #cccccc;
}
.calc_carpetcount .count_val {
  text-align: center;
}
.calc_addrow {
  cursor: pointer;
  display: flex;
  align-items: center;
  margin: 50px 0;
}
.calc_addrow svg {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}
.calc_addrow svg path {
  fill: #666;
  transition: .3s;
}
.calc_addrow:hover svg path {
  fill: green;
  transition: .3s;
}
.calc_rowdel {
  display: block;
  width: 20px;
  height: auto;
  cursor: pointer;
  margin: 0 5px;
  position: relative;
}
.calc_rowdel svg {
  height: 14px;
  width: 14px;
  margin: auto;
  position: absolute;
  bottom: -2px;
  top: 0;
}
.calc_rowdel svg path {
  display: block;
  transition: .3s;
}
.calc_rowdel:hover svg path {
  fill: black;
  transition: .3s;
}
.calc_rowprice {
  font-size: 23px;
  text-align: center;
}
.global_result p:first-child {
  font-weight: 600;
  display: inline-block;
  font-size: 30px;
}
.global_result .global_price {
  color: #01489f;
  font-weight: 600;
  display: inline-block;
  font-size: 30px;
  margin-left: 20px;
}
.global_result .calc_currency {
  color: inherit;
  font-size: 20px;
  margin-left: 15px;
}
.price_notyfi {
  transition: opacity 0.5s 0.4s;
  max-width: 500px;
  margin-top: 15px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 19px;
  color: #885555;
}

#myBtn {
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 180px;
}
.calc_modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
  z-index: 9999;
}
.calc_modal-content {
  position: relative;
  margin: auto;
  padding: 20px;
  width: 350px;
  background-color: #fff;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}

.calc_modalclose {
  color: #666;
  right: 16px;
  top: 8px;
  font-size: 28px;
  font-weight: bold;
  position: absolute;
}

.calc_modalclose:hover,
.calc_modalclose:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.calc_modal-header {
  padding: 2px 16px;
  color: white;
}
.calc_modal-header h2 {
  text-align: center;
  margin-bottom: 30px;
}
.calc_modal-body {padding: 2px 16px;}

.calc_modal-footer {
  padding: 2px 16px;
  text-align: center;
  font-style: italic;
  font-size: 11px;
}
#calc_modal input {
  height: 38px;
  width: 100%;
  color: #8c95a2;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  padding: 5px 15px 5px 15px;
  border-color: rgba(51,51,51,0.12);
  background-color: #ffffff;
  border-radius: 1px;
}
#calc_modal button {
  display: block;
  margin: auto;
  width: 100%;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
}

@media (max-width: 1100px) {
  .calc_rowprice {
    display: none;
  }
  .calc_rowdel {
    margin: auto;
  }
}

@media (max-width: 990px) {
  .calc_rowdel {
    margin-left: 40px;
  }
}
@media (max-width: 615px) {
  .calc_rowdel {
    margin-left: 40px;
  }
  .calc_table {
    width: 588px;
    overflow-x: scroll;
  }
}

<div class="calc_wrapper">
  <div class="calc_table">
    <div class="calc_title">
      <div>Тип</div>
      <div>Число замен</div>
      <div>Количество</div>
      <div> </div>
      <div> </div>
    </div>
    <div class="calc_body">
      <div class="calc_row">
        <div class="calc_select calc_sizes">
          <div class="select_selected" data-value="65x85">65x85<span>▾</span></div>
          <div class="select_items">
            <p class="selected" data-value="65x85">65x85</p>
            <p data-value="80x110">80x110</p>
            <p data-value="85x150">85x150</p>
            <p data-value="115x200">115x200</p>
            <p data-value="115x240">115x240</p>
            <p data-value="115x400">115x400</p>
            <p data-value="150x250">150x250</p>
            <p data-value="150x300">150x300</p>
            <p data-value="150x600">150x600</p>
          </div>
        </div>
        <div class="calc_select calc_periodicity">
          <div class="select_selected" data-value="1">1 раз в неделю<span>▾</span></div>
          <div class="select_items">
            <p class="selected" data-value="1">1 раз в неделю</p>
            <p data-value="2">2 раза в неделю</p>
            <p data-value="3">3 раза в неделю</p>
          </div>
        </div>
        <div class="calc_carpetcount">
          <div class="count_minus">-</div>
          <div class="count_val"><span>1</span> шт</div>
          <div class="count_plus">+</div>
        </div>
        <div class="calc_rowprice">800</div>
      </div>
    </div>
  </div>
  <div class="calc_addrow">Добавить
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 438.536 438.536" style="enable-background:new 0 0 438.536 438.536;" xml:space="preserve"><g><g>
      <path d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123   C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126   h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225   C438.532,59.576,430.49,40.204,414.41,24.123z M365.449,237.539c0,4.948-1.811,9.236-5.421,12.847   c-3.621,3.614-7.905,5.428-12.854,5.428H255.82v91.358c0,4.948-1.817,9.232-5.432,12.847c-3.61,3.62-7.897,5.427-12.847,5.427   h-36.543c-4.948,0-9.231-1.807-12.847-5.427c-3.617-3.614-5.426-7.898-5.426-12.847v-91.358H91.363   c-4.948,0-9.229-1.813-12.847-5.428c-3.615-3.61-5.424-7.898-5.424-12.847v-36.547c0-4.948,1.809-9.231,5.424-12.847   c3.617-3.617,7.898-5.426,12.847-5.426h91.363V91.36c0-4.949,1.809-9.233,5.426-12.847c3.616-3.618,7.898-5.428,12.847-5.428   h36.543c4.949,0,9.236,1.81,12.847,5.428c3.614,3.614,5.432,7.898,5.432,12.847v91.36h91.354c4.948,0,9.232,1.809,12.854,5.426   c3.613,3.615,5.421,7.898,5.421,12.847V237.539z" data-original="#000000" class="active-path" data-old_color="#000000" fill="#666666"/>
      </g></g></svg>
  </div>
  <div class="global_result">
    <p>Итого:</p>
    <span class="global_price">800.00 </span>
    <span class="calc_currency">₽/месяц</span>
  </div>
  <p class="price_notyfi">Данная цена является ориентировочной. Мы всегда готовы сделать более выгодное предложение, исходя из объёмов заказа и других условий.</p>
</div>

<button id="myBtn" class="default-btn-shortcode dt-btn dt-btn-s link-hover-off btn-inline-left ">Оформить заявку</button>
<div id="calc_modal" class="calc_modal">
  <div class="calc_modal-content">
    <span class="calc_modalclose">&times;</span>
    <div class="calc_modal-header">
      <h2>Оформление заявки</h2>
    </div>
    <div class="calc_modal-body">
      <form id="calc_form">
        <input type="hidden" name="theme" value="Заявка из калькулятора">
        <input type="text" name="Имя" placeholder="Ваше имя">
        <input type="text" name="Телефон" placeholder="Ваш телефон">
        <button class="default-btn-shortcode dt-btn dt-btn-s link-hover-off btn-inline-left ">Отправить заявку</button>
      </form>
    </div>
    <div class="calc_modal-footer">
      <p>Нажимая на кнопку "Отправить", Вы подтверждаете
        свое согласие на обработку персональных данных.</p>
    </div>
  </div>
</div>