How to prevent a flex box from growing with content

Question

In the code and jsfiddle below, flexbox proportions changes with content. I am feeling I do not understand the real purpose of flexbox here. If we are giving flex-grow properties for the proportions we desire, why do the boxes grow with content?

Notice when dataDiv has new span content in it, proportions are broken with the content. You can observe how it is the expected proportions when you delete the span inside dataDiv. Why does this occur?

https://jsfiddle.net/4shaz5oy/

.container {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
}
.mapBox {
  flex: 2;
  background-color: red;
}
.controlBox {
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.controlPanel {
  flex: 1;
  max-height: 33%;
  background-color: yellow;
  padding: 5px;
  text-align: center;
}
.dataPanel {
  flex: 2;
  max-height: 66%;
  background-color: blue;
  padding: 5px;
}

<div class="container">
  <div class="mapBox"></div>
  <div class="controlBox">
    <div class="controlPanel">
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
      <div class="buttonDiv"></div>
    </div>
    <div class="dataPanel">
      <div class="dataDiv">
        <span>yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada</span>
      </div>
    </div>
  </div>
</div>

Answer 1

The flex-grow defines how the remaining space should be distributed amongst the flex items, not the items themselves.

For their size you use flex-basis

html, body {
  margin: 0;
}
.container {
    display: flex;
    flex-flow: row wrap;
    height: 100vh;
}

.mapBox {
    flex: 2;
    flex-basis: 66%;
    background-color: red;
}

.controlBox {
    flex: 1;
    flex-basis: 33%;
    display: flex;
    flex-direction:column;
    background-color:green;
}

.controlPanel {
    flex: 1;
    max-height: 33%;
    background-color: yellow;
    padding: 5px;
    text-align: center;
}

.dataPanel {
    flex: 2;
    max-height: 66%;
    background-color: blue;
    padding: 5px;
}

<div class="container">
  <div class="mapBox">

  </div>

  <div class="controlBox">
    <div class="controlPanel">
      <div class="buttonDiv">

      </div>
      <div class="buttonDiv">

      </div>
      <div class="buttonDiv">

      </div>
    </div>

    <div class="dataPanel">
      <div class="dataDiv">
        <span>yoyoyoy as da sd ad sa da sd as da sd as da sd as da sd ad ada</span>
      </div>
    </div>
  </div>
</div>

---

Based on comments, here is a simplified sample of how to keep size

html, body{
  margin: 0;
}
.flex, .left, .right {
  display: flex;
}
.left, .right {
  flex: 1;
  flex-direction: column;
}
.left {
  background: red;
  flex-basis: 66.66%;
}
.right {
  flex-basis: 33.33%;
}
.item1 {
  background: yellow;
  overflow: auto;
  height: 33.33vh;
}
.item2 {
  background: lightblue;
}

<div class="flex">
  <div class="left">
    Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 Bla 0 <br>
    Bla 0<br>
    Bla 0<br>
    Bla 0<br>
    Bla 0<br>

  </div>
  <div class="right">
    <div class="item1">
      Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 Bla 1 <br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>

      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>
      Bla 1<br>

    </div>
    <div class="item2">
      Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 Bla 2 <br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>
      Bla 2<br>

    </div>
  </div>  
</div>

Answer 2

It looks like everything works as expected, the problem is there is no space among yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada that focus the box to grow.

If you set .dataPanel {word-break: break-all;} you'll see the differences.