Как я могу заставить этот flexbox расширяться с помощью flex-элементов?

const leftArrow = document.querySelector('#left-arrow');
const rightArrow = document.querySelector('#right-arrow');
const rootDiv = document.querySelector('#root');
const generateButton = document.querySelector("#button-generate");
var navMargin = '';
let rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
console.log(`Window size onload: ${rootContainerWidth}`);
window.addEventListener('resize', () => {
  rootContainerWidth = window.getComputedStyle(rootDiv, null).getPropertyValue("width");
  console.log(`The new window size is ${rootContainerWidth}`);
})
//This code basically generates the content within the div
generateButton.addEventListener("click", () => {
  for (let i = 0; i < 10; i++) {
    const newDiv = document.createElement("div");
    newDiv.classList.add("each-result");
    newDiv.appendChild(addImg("https://uk.usembassy.gov/wp-content/uploads/sites/16/please_read_icon_150x150.jpg"));
    rootDiv.appendChild(newDiv);  
  }
  rootDiv.firstElementChild.classList.add('nav-margin');
  navMargin = document.querySelector('.nav-margin');
});

//These enable the arrow to scroll through the dynamically generated content
// function navArrow () {
//   leftArrow.addEventListener('click', () => {
 
//   });
// rightArrow.addEventListener('click', () => {
//   if ()
//   });
// }




//Simple function to create and image element with the src attribute set in one line
function addImg(url) {
  const newImg = document.createElement("img");
  newImg.setAttribute("src", url);
  return newImg;
}

html, body {
  height: 100%;
}

button {
  position: relative;
  z-index: 1
  width: auto;
  height: 50px;
}

.container {
  display: flex;
  justify-content: center;
  position: relative;
  top: 15%;
  z-index: 0
}

.each-result {
  height: 150px;
  width: calc(10% + 20px);
  margin: 0 20px;
  border: 3px dotted red;
}

img {
  height: 100%;
  width: auto;
}
.nav-arrows {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: auto;
  position: absolute;
  background: clear;
  pointer-events: none;
}

#left-arrow, #right-arrow {
  pointer-events: auto;
}

#root-container {
  display: flex;
  align-items: center;
  border: 1px solid black;
  height: 200px;
  position: relative;
  flex-flow: row no-wrap;
/*   overflow: hidden; */
  width: 100%;
}

.result-container {
  display: flex;
  border: 2px blue dotted;
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div class="container">
  <div class="nav-arrows">
      <button id="left-arrow"><i class="fas fa-arrow-alt-circle-left"></i>
      </button>
        <button id="right-arrow"> <i class="fas fa-arrow-alt-circle-right"></i>
      </button>
    </div>
  <div id="root-container">
  <div id="root" class="result-container">
  </div>
  </div>

</div>
<button id="button-generate">Generate Content</button>