title: How to prevent a flex box from growing with content
body: <p>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 <code>flex-grow</code> properties for the proportions we desire, why do the boxes grow with content?</p>
  
  <p>Notice when <code>dataDiv</code> 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 <code>span</code> inside <code>dataDiv</code>. Why does this occur?</p>
  
  <p><a href="https://jsfiddle.net/4shaz5oy/" rel="noreferrer">https://jsfiddle.net/4shaz5oy/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="mapBox"&gt;&lt;/div&gt;
    &lt;div class="controlBox"&gt;
      &lt;div class="controlPanel"&gt;
        &lt;div class="buttonDiv"&gt;&lt;/div&gt;
        &lt;div class="buttonDiv"&gt;&lt;/div&gt;
        &lt;div class="buttonDiv"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="dataPanel"&gt;
        &lt;div class="dataDiv"&gt;
          &lt;span&gt;yoyoyoyasdasdadsadasdasdasdasdasdasdasdadada&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>