unwanted growth of flex element when updating innerhtml

Question

I have the following layout, and want to update the content (innerHTML) of element "three". However, when I do so, it unwantedly resizes the element, changing the width of all my columns. How do I prevent this happen? I do not! want any changes to any div's width, when pushing the "update" button.

The only way I got it to work is replace flex-grow with flex:1 0 1%; on element "three". But that 1% (or any % really except 100) make no sense to me. Why would that flex-basis make it ok? it feels like a hack, and not the actual correct way of doing it.

function update() {
  var text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.";
  document.querySelector(".three").innerHTML = text;
}

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  background-color: tomato;
  display: flex;
  height: 100%;
  min-height: 100vh;
  color: #ffffff;
}

.one {
  width: 10%;
  background-color: grey;
  height: auto;
}

.two {
  width: 200px;
  height: 100vh;
  background-color: green;
  display: inline-block;
  position: sticky;
  top: 0;
}

.three {
  background-color: orange;
  flex-grow: 1;
  height: 100vh;
  min-height: 3000px;
}

.four {
  width: 200px;
  overflow-y: hidden;
}

.five {
  width: 10%;
  background-color: dodgerblue;
  height: auto;
}

<div class="container">

  <div class="one">
    one
  </div>

  <div class="two">
    two
    <br/>
    <button id="update" onclick="update()">update</button>
  </div>

  <div class="three">
    three
  </div>

  <div class="four">
    four
  </div>

  <div class="five">
    five
  </div>

</div>