Как предотвратить увеличение ширины ниже div?

Question

if (fiddleLinkWorks)
  // ignore the code at the end of the question
else
  // check the code at the end of the question

Требование

В приведенной выше скрипке есть 3 деления - слева, справа и по центру. Левый и правый должны иметь ширину 200 пикселей, без изменений. Центр div должен покрывать оставшуюся ширину. В любом случае, общая ширина более 3 делителей не должна превышать ширину окна.

Рабочая

В центральном div (оранжевого цвета) вы найдете поисккоробка с заполнителем и четырьмя кнопками над ним. При нажатии на каждую кнопку кнопка добавляется в поле поиска с текстовым полем. При повторном нажатии на ту же кнопку кнопка исчезает вместе со своим полем ввода из поля поиска.

Issue

Когда я нажимаю все четыре кнопки, ширинаокна поиска и центр div автоматически увеличивается, и горизонтальная полоса прокрутки появляется в окне. Я хочу, чтобы ширина окна поиска не увеличивалась, и он должен содержать все четыре кнопки с их полями ввода, независимо от того, уменьшается ли ширина кнопок в окне поиска.

Код

$(".tomato-btn").click(function(){
        var value = $(this).text();
      if($(this).hasClass('active')) { // rm btn
        $(this).removeClass('active');
        removeBtn(value);
        if($('.filter-btn').length == 0)
          $('#placeholder').show();
      } else { // add btn
        $(this).addClass('active');
        $('#placeholder').hide();
        addBtn(value);
      }
    })
    
    var addBtn = function(value) {
      var filterBtn = document.createElement("div");
      filterBtn.className = 'filter-btn';
    
      var btnLabel = document.createElement("button");
      btnLabel.className = 'filter-btn-label';
      var btnSpan = document.createElement("span");
      btnSpan.className = 'filter-btn-span';
      btnSpan.innerHTML = value;
      btnLabel.appendChild(btnSpan);
      var closeFilter = document.createElement("i");
      closeFilter.className = 'close-filter fa fa-times';
      close.ariaHidden = 'true';
      btnLabel.appendChild(closeFilter);
      filterBtn.appendChild(btnLabel);
    
      var inputDiv = document.createElement("div");
      inputDiv.className = 'input-div';
      var inputFilter = document.createElement("input");
      inputFilter.className = 'input-filter';
      inputDiv.appendChild(inputFilter);
      var closeInput = document.createElement("i");
      closeInput.className = 'close-input fa fa-times';
      close.ariaHidden = 'true';
      inputDiv.appendChild(closeInput);
      filterBtn.appendChild(inputDiv);
    
      document.getElementById('filter-container').appendChild(filterBtn);
    }
    
    var removeBtn = function(value) {
      $('.filter-btn-span').each(function(){
        if($(this).html() == value) {
          $(this).closest('div.filter-btn').remove();
        }
      })
    }
    
    $('#reset').click(function(){
      $('.tomato-btn').each(function(){
        if($(this).hasClass('active'))
          $(this).trigger('click');
      })
    })

body {
      font-family: Arial;
    }
    
    header {
      display: flex;
      width: 100%;
    }
    
    #left-div {
      width: 200px;
      min-width: 200px;
      height: 200px;
      background-color: wheat;
    }
    
    #right-div {
      width: 200px;
      min-width: 200px;
      height: 200px;
      background-color: wheat;
      display: flex;
    }
    
    #center-div {
      flex-grow: 1;
      flex-direction: column;
      height: 200px;
      background-color: tomato;
      display: flex;
      justify-content: space-evenly;
    }
    
    #tomato-btn-bar {
      display: flex;
      justify-content: center;
    }
    
    .tomato-btn {
      outline: none;
      width: 6rem;
      height: 2rem;
      background-color: tomato;
      border: solid 1px white;
      color: white;
      transition: .25s;
      cursor: pointer;
      margin: 0 .25rem;
    }
    
    .active {
      background-color: white;
      color: tomato; 
    }
    
    .tomato-btn:hover {
      background-color: white;
      color: tomato; 
    }
    
    #search-bar {
      display: flex;
    }
    
    .search-bar-btn {
      outline: none;
      width: 6rem;
      height: 2.5rem;
      background-color: tomato;
      border: solid 1px white;
      color: white;
      transition: .25s;
      cursor: pointer;
      margin: 0 .25rem;
    }
    
    .search-bar-btn:hover {
      background-color: white;
      color: tomato; 
    }
    
    #fake-div {
      display: flex;
      margin: 0 .25rem;
      flex-grow: 1;
      border: solid 1px white;
      background-color: white;
    }
    
    #filter-container {
      display: flex;
      flex-grow: 1;
    }
    
    #placeholder {
      margin: auto .25rem;
      color: gray;
    }
    
    i {
      margin: auto .25rem;
      cursor: pointer;
    }
    
    .filter-btn {
      display: flex;
      flex-grow: 1;
    }
    
    .filter-btn-label {
      display: flex;
      outline: none;
      background-color: tomato;
      color: white;
      border: solid 1px tomato;
    }
    
    .input-div {
      display: flex;
      flex-grow: 1;
    }
    
    .input-filter {
      outline: none;
      border: none;
      padding: .25rem;
      flex-grow: 1;
    }

    <html>
    
    <head>
      <link rel="stylesheet" href="search.css"/>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    </head>
    
    <body>
      <header>
        <div id="left-div"></div>
        <div id="center-div">
          <div id="tomato-btn-bar">
            <button class="tomato-btn">Name</button>
            <button class="tomato-btn">Phone</button>
            <button class="tomato-btn">Gender</button>
            <button class="tomato-btn">Address</button>
          </div>
          <div id="search-bar">
            <button class="search-bar-btn">Select All</button>
            <div id="fake-div">
              <div id="filter-container">
                <span id="placeholder">Search here...</span>
              </div>
              <i class="fa fa-times" id="reset" aria-hidden="true"></i> 
              <i class="fa fa-search" aria-hidden="true"></i> 
            </div>
            <button class="search-bar-btn">Name Sort</button>
            <button class="search-bar-btn">Digit Sort</button>
          </div>
        </div>
        <div id="right-div"></div>
      </header>
      <script src="search.js"></script>
    </body>
    
    </html>


    

PS: Если возможно, попробуйте запустить код в обычном окне браузера, поскольку скрипта обеспечивает только четвертьвесь экран